0

我有一个带有随机数量的子 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/

4

2 回答 2

2

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

编辑： jsfiddle.net 现在对我来说不是很好。引入的变化是vertical-align: top针对.button班级的。

于 2013-01-17T17:16:36.963 回答
0

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

于 2013-01-17T17:16:03.970 回答