我发现很难将文本置于其他两个文本之间.
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完美地居中,如正确标记的图像所示？
解决方法
一种方法是将中间元素的显示设置为内联块,然后在父元素上使用text-align：center进行水平居中：
.footer {
background: #e33;
padding: 5px;
text-align: center;
}
.left_edge {
float: left;
}
.center {
display: inline-block;
}
.right_edge {
float: right;
}
或者,您可以避免浮动元素,并使用以下方法：
.footer > span {
display: inline-block;
width: 33.333%
}
.left_edge {
text-align: left;
}
.center {
text-align: center;
}
.right_edge {
text-align: right;
}
