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

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

所以基本上我有伪HTML：

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

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

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

谢谢！

来源

2013-12-12 Shannon Rothe

尝试在http重建的问题：//的jsfiddle .net /，然后将链接粘贴到您的问题中。没有看到更多，很难提供帮助。 –

您可以尝试将div显示设置为'inline-block'（或对于旧版浏览器是'inline'），然后将'text-align：center'设置为他的容器。但正如迈克所说，没有一个例子就很难提供帮助。 – OlivierH

body { text-align：center; }将此添加到您的CSS，它的工作原理 –

使用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标签上给出，它可以给这search标记的任何parent wrapper。

来源

2013-12-12 11:09:22 NoobEditor

只需设置display:block的搜索DIV :)

来源

2013-12-12 11:13:50 n1kkou

添加这节省了时间希望这有助于

body 
    { 
     text-align:center; 
    }

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

来源

2013-12-12 11:15:08

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

回答

相关问题