css - 使用 CSS 在父 div 中居中任意数量的 div

Question

我有一个带有随机数量子 div 的父 DIV(菜单栏)。我正在寻找一个干净、简单的 CSS，它总是将子 div 水平居中，而不管它们的宽度或 div 的数量(只要它们适合父级)。我不想计算所有宽度或使用绝对定位。

在查看了几个解决方案后，我想出了这段代码，但子 div 仍然没有正确居中，尤其是当您用文本或图像填充它们时。

HTML:

<div id="menubar">
   <div id="button">too much text will offset the other buttons</div>
   <div id="button">b2</div>
   <div id="button">b3</div>
</div>

CSS:

#menubar {
    position:absolute;
    bottom:0px;
    background-color: #00A0E2;
    width:100%; height:80px;
    text-align:center;
} 

#button {
    margin: 5px auto 5px auto;
    width:120px;height:70px;
    display:inline-block;
    background-color:white;
    cursor: pointer;
}

我创建了这个 JSFiddle 来说明我的问题:http://jsfiddle.net/mZ2P2/

Answer 1

您忘记了 vertical-align 内联元素，以便它们在不具有相同高度时正确显示。这是一个 working example .我还删除了按钮的 id 属性并将其更改为 class。

编辑:jsfiddle.net 现在对我来说不是那么好用。引入的更改是 vertical-align: top 到 .button 类。