在父级中居内联块div而忽略浮动元素

时间:2013-08-14 19:16:06

标签: html css

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

enter image description here

.parent {
    text-align: center;
}
.parent div {
    display: inline-block;
}
<div id="parent">
    <div> ... </div>
    <div style="float:right"> ... </div>
</div>

当前设置在父级内部都有内部div,但我假设正确的方法是将右对齐div置于绝对位置外?

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

如何实现这一结果?

2 个答案:

答案 0 :(得分:23)

设置正确的div css

position:absolute;
right:0;

相对于父div

#parent {
position:relative;
}

答案 1 :(得分:2)

position:absolute是唯一的方法

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/1/

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

<强> EDITED

不确定是否已经建议

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

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/3/

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