在多个浮动div之间居中div

时间:2016-09-01 14:55:46

标签: html css

如果这是重复的道歉;但是我无法找到我想要的东西。

我有一个容器div;其中1个div设置为向左浮动;并且可以将1或2个其他div设置为向右浮动。所有这些div都可以有不同的宽度。

我要做的是让我的居中div总是在包含div中居中;不管浮动的div。

我尝试过将宽度设置为自动,将边距设置为自动,将文本对齐设置为中心等各种组合,但还没有完全实现。

有人能指出我正确的方向吗?

编辑:jsfiddle:https://jsfiddle.net/1rn9t5yk/

<div>
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
<div style="float: right">RIGHT2</div>
<div style="text-align: center; margin:0 auto">CENTER</div>
</div>

所以鉴于上述情况;我想要发生的是中心div不转移位置取决于是否有1或2个浮动右边的div。如果你删除一个并重新运行;你可以看到位置转移

1 个答案:

答案 0 :(得分:1)

如果你想将div放在包装div中,而不需要注意包装器中的其他元素,你可以使用绝对定位

https://jsfiddle.net/t6z9wgxv/

<div>
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
<div style="float: right">RIGHT2</div>
<div style="position: absolute; left: 0; right: 0; text-align: center;">CENTER</div>
</div>