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

概述我发现很难将文本置于其他两个文本之间. HMTL： <div class="main-container"> <div class="footer"> <span class="left_edge">@left</span> <span class="center">@center</span> <span class="right_edge 我发现很难将文本置于其他两个文本之间.

HMTL：

<div >    <div >        <span >@left</span>        <span >@center</span>        <span >@right</span>    </div></div>

CSS：

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

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

@R_502_6120@ 一种方法是将中间元素的显示设置为内联块,然后在父元素上使用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;}

总结

以上是内存溢出为你收集整理的HTML – 如何在两个浮动元素之间完美地居中浮动元素？全部内容，希望文章能够帮你解决HTML – 如何在两个浮动元素之间完美地居中浮动元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。