HTML – 如何在两个浮动元素之间完美地居中浮动元素？

发布时间：2020-12-14 22:29:54 所属栏目：资源来源：网络整理

导读：我发现很难将文本置于其他两个文本之间. 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; paddin

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

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进行水平居中：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!