使用CSS将封装在DIV中的浮动输入元素居中_Css_Css Float_Centering

使用CSS将封装在DIV中的浮动输入元素居中

css

使用CSS将封装在DIV中的浮动输入元素居中,css,css-float,centering,Css,Css Float,Centering,关于定心的问题和答案并不缺乏，但考虑到我的具体情况，包括浮动，我无法让它发挥作用我想将包含三个浮动输入元素（拆分按钮、文本、复选框）的容器DIV居中，这样当我的页面调整得更宽时，它们会从以下位置开始： ||.....[ ][v] [ ] [ ] label .....|| 对此 ||......................[ ][v] [ ] [ ] label........

关于定心的问题和答案并不缺乏，但考虑到我的具体情况，包括浮动，我无法让它发挥作用

我想将包含三个浮动输入元素（拆分按钮、文本、复选框）的容器DIV居中，这样当我的页面调整得更宽时，它们会从以下位置开始：

  ||.....[      ][v]     [            ]       [ ] label .....||

对此

  ||......................[      ][v]     [            ]       [ ] label.......................||

它们可以很好地浮动，但当页面变宽时，它们会停留在左侧：

  ||.....[      ][v]     [            ]       [ ] label .......................................||

如果我移除浮动，以便输入元素堆叠而不是并排：

  [      ][v]   
  [            ]  
  [ ] label

然后，调整页面大小时，它们会正确居中。因此，正是应用于容器内DIV#hbox元素的浮子弄乱了定心我想做的事情是否因为浮点数的工作方式而不可能？

这是我的DOCTYPE，标记在w3c上确实有效：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

我还尝试将显示：内联块应用于浮动按钮、文本输入和复选框；尽管我认为它只适用于文本，但根据我在这里看到的帖子，我也尝试将空白：nowrap应用于#term1 container DIV

更完整一点，这里是创建拆分按钮的jQuery：

$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
   primary: "ui-icon-triangle-1-s"
    }
}).click( function(){positionOperatorsMenu();} )
})

CSS:

HTML

您是否有理由不在

.hbox

上设置宽度并将边距设置为

边距：0自动？虽然第一个建议的appproach没有将浮动的表单元素居中，但第二个建议（显示：表格单元格；显示：内联）确实将它们居中，但在调整窗口大小时它们不会重新定位。谢谢你的提示。我发现将这些元素包装在一个现场集合中效果最好。
  #term1-container {text-align: center}
  .hbox {margin: 0 auto;}
  .hbox div {float:left; }

$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
   primary: "ui-icon-triangle-1-s"
    }
}).click( function(){positionOperatorsMenu();} )
})

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

   <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>

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