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>

我试过＆＃34;显示：inline-block; vertical-align：middle;＆＃34;但它的左对齐。请帮助我将div标签集中在父div中。

Answer 1

请添加css

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

Answer 2

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

#parent {
    text-align: center;
}

请参阅a live demo。

Answer 3

您需要其他级别的嵌套div。

第一级是inline-block和width:50%，第二级是display:block，width:20px和margin:0 auto;

编辑：

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

父div中的div标签

3 个答案: