您的位置:首页 > 其它

如何实现图片和两行文字在一行显示

2018-03-29 07:37 501 查看
文章来源:https://segmentfault.com/q/1010000008800083
给你个例子- -html
<div class="wrap">
<img src="images/ico.png" alt="">
<span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span>
</div>
css
.wrap {
/* 可无需设置高度,靠图片高度 或者 文字的上下padding撑开高度 */
border: 1px solid;
width: 600px;
text-align: center;
}
.wrap span{
display: inline-block;
vertical-align: middle;
padding: 20px 0; /* 撑开高度 */
}
.wrap img{
width: 10px;
height: auto;
vertical-align: middle;
}
其实多行居中分很多情况的- -只有行内元素,只有行内替换元素,行内与行内替换混合,建议去好好看看vertical-align与基线相关资料。就楼主这个需求,还有其他更容易的实现方式,比如:
1、flex弹性盒子(移动端)2、使用表格布局
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: