html - 如何在两个 float 元素之间完美居中 float 元素？

Question

我发现很难将一个文本置于其他两个文本之间。

HTML:

<div class="main-container">
    <div class="footer">
        <span class="left_edge">@left</span>
        <span class="center">@center</span>
        <span class="right_edge">@right</span>
    </div>
</div>

CSS:

.footer{
    background: #e33;
    padding: 5px;
}
.left_edge{
    float: left;
}
.center{
    float: left;
}
.left_edge{
    float: right;
}

如何将正确标记的图像中所示的 .center 完美居中？

Answer 1

一种方法是将中间元素的display设置为inline-block，然后使用text-align: center水平居中的父元素:

Example Here

.footer {
    background: #e33;
    padding: 5px;
    text-align: center;
}
.left_edge {
    float: left;
}
.center {
    display: inline-block;
}
.right_edge {
    float: right;
}

或者，您可以避免 float 元素，而是使用以下方法:

Example Here

.footer > span {
    display: inline-block;
    width: 33.333%
}
.left_edge {
    text-align: left;
}
.center {
    text-align: center;
}
.right_edge {
    text-align: right;
}