using CSS to center FLOATED input elements wrapped in a DIV

css css-float centering

10,865

CSS:

body {
    text-align: center;
}
#term1-container {
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
.hbox div {
    float: left;
}

HTML

   <div id="term1-container">
     <div class="hbox">
        <div>
         <button id="operator1" class="operator-split-button">equals</button>
         <button id="operator1drop">show all operators</button>
        </div>
       <div><input type="text" id="term1"/></div>
       <div><input type="checkbox" id="meta2"/>
      <label for="meta2" class="tinylabel">meta</label></div>
     </div>
    </div>

UPDATED

if you have problem on setting a fixed width:

you can use something like this

body {
    text-align: center;
}
#term1-container {
    display: table;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}
.hbox div {
    display: table-cell;
    display: inline
}

10,865

Tim

Updated on June 04, 2022

Comments

Tim almost 2 years
There's no shortage of questions and answers about centering but I've not been able to get it to work given my specific circumstances, which involve floating.

I want to center a container DIV that contains three floated input elements (split-button, text, checkbox), so that when my page is resized wider, they go from this:
```
  ||.....[      ][v]     [            ]       [ ] label .....||
```
to this
```
  ||......................[      ][v]     [            ]       [ ] label.......................||
```
They float fine, but when the page is made wider, they stay to the left:
```
  ||.....[      ][v]     [            ]       [ ] label .......................................||
```
If I remove the float so that the input elements are stacked rather than side-by-side:
```
  [      ][v]   
  [            ]  
  [ ] label
```
then they DO center correctly when the page is resized. SO it is the float being applied to the elements of the DIV#hbox inside the container that is messing up the centering. Is what I want to do impossible because of the way float is designed to work?

Here is my DOCTYPE, and the markup does validate at w3c:
```
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
Here is my markup:
```
 <div id="term1-container">
 <div class="hbox">
    <div>
        <button id="operator1" class="operator-split-button">equals</button>
        <button id="operator1drop">show all operators</button>
    </div>
    <div><input type="text" id="term1"></input></div>
    <div><input type="checkbox" id="meta2"></input><label for="meta2" class="tinylabel">meta</label></div>
 </div>
</div>
```
And here's the (not-working) CSS:
```
  #term1-container {text-align: center}
  .hbox {margin: 0 auto;}
  .hbox div {float:left; }
```
I have also tried applying display: inline-block to the floated button, text-input, and checkbox; and even though I think it applies only to text, I've also tried applying white-space: nowrap to the #term1-container DIV, based on posts I've seen here on SO.

And just to be a little more complete, here's the jQuery that creates the split-button:
```
$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
   primary: "ui-icon-triangle-1-s"
    }
}).click( function(){positionOperatorsMenu();} )
})
```
- prodigitalson almost 14 years
  
  Is there a reason why you dont just set a width on .hbox and set the margins to margin: 0 auto;?
Tim almost 14 years

Although the first suggested appproach did not center the floated form elements, your second suggestion (display: table-cell; display: inline) did center them, but they don't reposition when the window is resized. Thanks for that tip. I discovered that wrapping these elements in a fieldset work best.