Question

我有一个父DIV（一个菜单栏），其中包含一个随机数的子div。我正在寻找一个干净，简单的CSS，它总是将子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。

Answer 2

为什么不使用无序列表然后使用css将它们放在中心位置。

使用CSS将父div中的任意数量的div居中

2 个答案: