using CSS to center FLOATED input elements wrapped in a DIV_问答_开发者

using CSS to center FLOATED input elements wrapped in a DIV

开发者 https://www.devze.com 2023-01-01 06:40 出处：网络

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.

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 ele开发者_JAVA技巧ments 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();} )
})

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
}