我有一个想要显示为圆形的图像(边界半径:50%),并且在同一行上我想要一些具有设置宽度和背景的文本.我不想硬编码任何值.实现这个目标的最佳方法是什么?
<div class="header"> <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> <p class="headingText">Hello</p> </div>
.i { width: 80px; height: 80px; border-radius: 50%; } .headingText { color: white; background: black; display: inline-block; width: 350px; padding-top: 10px; padding-bottom: 10px; text-align: center; }
解决方法
你可以尝试这样的事情:
.header { padding-top:26px; padding-left:40px; position:relative; } .i { position:absolute; width:80px; height:80px; border-radius:50%; top:0; left:0; } .headingText { color:white; background:black; display:inline-block; width:350px; padding-top:10px; padding-bottom:10px; text-align:center; }
原文地址:https://www.jb51.cc/html/227622.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。