中心父DIV与CSS里面的div任何金额 [英] Center any amount of divs inside a parent div with CSS

问题描述

我有一个父DIV（菜单栏）用随机数孩子的div。我在寻找一个清洁，简单的CSS，将永远居中孩子div的水平，无论其宽度或申报单的数量（只要它们符合母公司内部）的。我不希望要计算所有的宽度或使用绝对定位。

I have a parent DIV (a menu bar) with a random number of child divs. I'm looking for a clean, simple CSS that will always center the child divs horizontally, regardless of their width or the number of divs (as long as they fit inside the parent). I don't want to have to calculate all the widths or use absolute positioning.

在寻找一些解决方案，我想出了这个code，但孩子的div仍然不居中正确，尤其是当你用文字或​​图像填充。

After looking at several solutions I came up with this code, but the child divs still don't center properly, especially when you fill them with text or images.

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/

推荐答案

您忘了垂直对齐内联元素，使他们正确地显示，当他们不具备相同的高度。这里有一个工作示例。我也删除了您的按钮 ID 属性，并改变了它的类。

You forgot to vertical-align the inline elements so that they display correctly when they do not have the same height. Here's a working example. I also removed the id attribute of your buttons and changed it for a class.

编辑： jsfiddle.net工作不那么好，我现在。引入的变化是垂直对齐：顶部到 .button 类

jsfiddle.net is not working all that well for me right now. The change introduced was vertical-align: top to the .button class.

这篇关于中心父DIV与CSS里面的div任何金额的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！