Question

我试图将包含两个元素的div居中。通常我要做的是设置宽度然后使用margin: 0 auto;但在这种情况下，这不适用，因为我不知道文本框和提交按钮（水平相邻）的组合宽度与所有填充和边距以及什么不是。

所以基本上我有伪html：

<div class="search">
    <input id="query"><button id="searchSubmit">
</div>

这可能吗？如果是这样，怎么样？

不工作演示：http://jsfiddle.net/6B9DT/

谢谢！

Answer 1

在这种情况下，使用text-align: center;非常有用......这里是 DEMO

<强> HTML

 <div class="search">
    <input id="query"> 
    <button id="searchSubmit">Search</button>
 </div>

<强> CSS

 body {
    text-align: center;
}
#search {
    text-align: left;
    border: 1px solid red;
    display: inline-block;
    /* for ie6/7: */
    *display: inline;

}

请注意，text-align: center;标记上已提供body，可以将此parent wrapper标记的任何search提供给它。

Answer 2

只需为搜索div设置display:block：）

Answer 3

添加此项可节省时间希望这有帮助

body
    {
        text-align:center;
    }

小提琴 http://jsfiddle.net/6B9DT/1/

中心对齐包裹在div中的两个元素

3 个答案: