我发现很难将文本置于其他两个文本之间.
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; }
原文地址:https://www.jb51.cc/html/242454.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。