html - 在父 div 中居中 div 标签

Question

我在父 div 中有两个 div 标签。我想在同一行显示两个 div 并居中。下面是html代码。

<div id="parent">
    <div id="addEditBtn" style="display:inline-block; vertical-align: middle; width:20px; cursor:pointer;" class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-pencil"></span></div>

    <div id="deleteBtn" style="display:inline-block; vertical-align: middle; width:20px; cursor:pointer;" class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-trash"></span></div>
</div>

我试过“显示：内联块；垂直对齐：中间；” 但它的左对齐。请帮助我在父 div 中居中 div 标签。

Answer 1

请添加css

    #addEditBtn,#deleteBtn {
    display:table;
margin:0 auto;
width:48%;
    }

Answer 2

当你display: inline-block;和元素时，为了居中的目的，它被视为图像或文本字符。

#parent {
    text-align: center;
}

观看现场演示。

Answer 3

您将需要另一个级别的嵌套 div。

第一级是inline-blockand width:50%，第二级display:block是width:20pxand margin:0 auto；

编辑 ：

是的，text-align: center在父 div 上也应该工作：http: //jsfiddle.net/ZGeN8/，但我更喜欢我的答案，因为它会更容易适应 IE6/7