如何将两个浮动元素之间的浮动元素完美居中？

Question

我发现很难将文本居中在两个其他文本之间。

HMTL：

<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; 
} 

另外，您可以避免浮动元素，并使用以下方法代替：

Example Here

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