Question

关于居中的问题和答案并不缺乏，但鉴于我的具体情况，我无法让它发挥作用，这涉及浮动。

我想将包含三个浮动输入元素（分割按钮，文本，复选框）的容器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">

这是我的标记：

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

这是（不工作的）CSS：

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

我还尝试将 display：inline-block 应用于浮动按钮，文本输入和复选框;虽然我认为它仅适用于文本，但我也尝试将 white-space：nowrap 应用于＃term1-container DIV，基于我在SO上看到的帖子。

为了更加完整，这里是创建分割按钮的jQuery：

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

Answer 1

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>

更新

如果您在设置固定width:

时遇到问题

你可以使用这样的东西

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

使用CSS来居中包含在DIV中的FLOATED输入元素

1 个答案: