如何在父div中水平居中多个div

时间:2015-01-06 15:30:22

标签: javascript jquery css css3 css-float

我正在尝试创建一个包含多个div的控件,并且所有div都是水平居中对齐的。如下图所示。

enter image description here

我能够使用float:left css属性浮动每个div。给出这样的东西

enter image description here

但是div总是留给他们的父母。

我有一个替代解决方案使用javascript定位每个div但我想使用css。 是否有可能使用CSS实现这一目标。

提前致谢

1 个答案:

答案 0 :(得分:11)

这可以做你想做的事情:

<强> HTML:

<div class="parent">
    <div class="child">Element 1</div>
    <div class="child">Element 2</div>
</div>

<强> CSS:

.child {
    display: inline-block;
}

.parent {
    text-align: center;
}

the fiddle