在忽略浮动元素的同时在父级中居中内联块 div答案

【问题标题】：Center inline-block div in parent while ignoring floating elements在忽略浮动元素的同时在父级中居中内联块 div
【发布时间】：2013-08-16 21:58:00
【问题描述】：

我正在尝试将内联 div 在其父级中居中。父元素还有一个向右浮动的子元素div。由于右对齐div，我居中的div 向左移动。无论浮动的位置/大小如何，我都想将中间 div 居中，如下图所示，并提供代码。

.parent {
    text-align: center;
}
.parent div {
    display: inline-block;
}

<div id="parent">
    <div> ... </div>
    <div style="float:right"> ... </div>
</div>

当前设置在父级内部有两个内部 div，但我假设正确的方法是让右对齐的 div 在外部具有绝对位置？

另外，我在同一页面上有多个父 div 实例。

我怎样才能达到这个结果？

【问题讨论】：

标签： html css

【解决方案1】：

设置正确的div css

position:absolute;
right:0;

相对于父 div

#parent {
position:relative;
}

【讨论】：

【解决方案2】：

position:absolute是唯一途径

.center {
    display:inline-block;
    position: absolute;
    left:0;
    right:0;
}

已编辑

不确定这是否已经被建议

或者你可以absolute: position; 右div 代替

.right {
    display:inline-block;
    position: absolute;
    right:0;
}

【讨论】：

这是唯一的方法。？将中间 div 的左边距设置为与右边 div 的宽度相同，然后设置中间 div 边距：auto.. 这是一种可能的方法吗？
这是一种可能的方式，但我不推荐它。另一种方法是将正确的 div 设置为绝对位置并将其定位正确，不浮动，然后相应地居中另一个 div。查看我的编辑。
是的，这就是我的回答。
所以第一个解决方案并没有真正起作用，因为由于某种原因，父 div 最终的高度为 0。见this。第二个可以在父级上添加“位置：相对”，但是索宾之前已经回答过这个问题：）谢谢。
是的，@SobinAugustine 确实首先回答了这个问题，这听起来像是满足您需求的最佳解决方案。