Can someone help me with this HTML and CSS issue?
<div id="wrapper">
<div id="center">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clearBoth"></div>
</div>
</div>
This is the CSS part:
#wrapper{width:100%}
.cell{float:left}
The width of #wrapper is set to 100%, and the number of cells varies, making the width of #center also variable.
The question at hand is: How can I ensure that #center remains horizontally center-aligned?
Achieving this is possible using display:inline-block.
Here is a simple example:
CSS:
#wrapper{
width:100%;
text-align:center;
}
#center{
display:inline-block;
*display:inline;/* For IE*/
*zoom:1;/* For IE*/
background:yellow;
overflow:hidden;
text-align:left;
}
.cell{
float:left;
width:50px;
height:50px;
background:red;
margin:5px;
}
You can view the working example here: http://jsfiddle.net/8a4NK/
Reviewing this code snippet in 2021
#container{
width:100%;
display: flex;
justify-content: space-around;
}
#inner{
background:green;
display: flex;
}
.box{
width:50px;
height:50px;
background:blue;
margin:10px;
}
JSFiddle Link: http://jsfiddle.net/9b34xrsz/
I recently created two different web pages to explore the contrasting features between responsive and non-responsive designs. I specified the width and margin values in the CSS files for both pages. Remarkably, both web pages exhibit responsive behavior e ...
I'm currently working on a code snippet like this: <select name="id" id="id"> <OPTION VALUE="null">Select<OPTION> <? foreach ($genres as $row){ ?> <OPTION VALUE="<? echo $row->id; ?>"><? echo ...
I'm having trouble with creating inline radio buttons using bootstrap. Neither of the options are being selected. I've attempted various solutions such as adjusting the attributes for, name, and trying different ways to call the bootstrap functi ...
I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...
Here is an example of HTML: <ul id="navbar-main" class="navbar-nav mr-auto"> <li class="nav-item active"> <a href="https://travian.dev/materials" class="nav-link nav-materials"> <span class="invisible">Mater ...
Bootstrap and custom CSS are being used for buttons, but there is an issue. <button type="button" class="dropdown-item"> <span (click)="showI('test_data)" class="text-capitalize&q ...
I have recently started working with angular and am facing difficulty in accessing the submenu items within my angular application. While I can successfully access the top level menu items, I am struggling to retrieve the second level items. Here is a sni ...
I have created 3 unique templates (DetailView, CardView, Column) for displaying content on a single page. Users can easily switch between these views. My goal is to display only one view at a time on the page. When the user switches views, I want to remov ...
Creating a popup for my React app without relying on external libraries is my current project. I am experimenting with using transition and transform with scale to size the popup dynamically based on screen size and content, then center it on the screen. ...
I have implemented a CSS Drop Down Menu on my website. In a specific section of the site, I am using the menu links to trigger AJAX-jQuery calls that dynamically change the content of a DIV without the need for page reloading. <script type="text/javasc ...
Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...
I've successfully implemented a simple form that uses JQuery Ajax for submission. My goal now is to display a busy indicator, or "loader image," as an overlay on the entire form while it's being processed. Most examples I've come across only ...
I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...
Trying to create a carousel oriented vertically in Bootstrap 4 Alpha 6 has been a bit of a challenge. It's puzzling why the Bootstrap developers didn't include this orientation, but I've been working on my own solution. I suspect there' ...
I have a website with a sticky header (position: fixed), and despite adding extra padding to the body, the main content Header and part of the paragraph are still hidden behind the fixed header. This issue only occurs on the homepage and on screens smaller ...
Working on a unique loading animation with 3 shapes that will scale as they follow a path. Each shape begins from a different starting point but follows a similar path. Shapes and paths were created in Illustrator and exported as SVGs. See below for an exa ...
Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...
I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minim ...
After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening. I've tried vario ...
I'm currently working on a component in React that involves using an input field to type query syntax, similar to (A=2 and B="Value2"). My goal is to highlight errors by displaying a red wavy line below objects that are incorrect, without affecting th ...