共计 720 个字符,预计需要花费 2 分钟才能阅读完成。
img 图片与文字对齐,图标与标题对齐
很多时候,在页面中会遇到图标与文字混排的情况,用 vertical-algin: middle
并不能让图片完全对齐于文字。
目的是达成这种效果:(这并不是用 vertical-align
实现的)
先看一下用 vertical-align 的样子
vertical-align: middle
是设置在 img
上的,此时虽然能凑合看,但并不完美。作为完美主义者是肯定受不了的。
一种完美的解决方法
html 结构是这样的
<div class="coin-title">
<img src="img/coin/BTC.png" alt="BTC">
<h5>BTC</h5>
</div>
scss(不了解 scss 的移步这里:scss 基础用法)
.coin-title {
line-height: 1;
color: white;
margin-bottom: 8px;
> img {
float: left;
height: 1rem;
display: block;
}
> h5 {
font-size: 1rem;
padding-left: 20px;
}
&:after{ // clearfix
content: '';
clear: both;
display: block;
}
}
实现原理是这样的,<img>
与 <h5>
同时包裹在 div
中
- 让
<img>
和<h5>
都以block
显示 - 给
<img>
设置高度与<h5>
一致,此时<img>
会自动等比例缩放到这个高度 - 让
<img>
float: left
,此时 <img> 就会脱离布局 - 给
<h5>
设置padding-left
,并大于<img>
的宽度,<img>
就会出现在<h5>
的左边,两者重叠 - 最好在父元素
div
上添加一个clearfix
抵消掉上面float
产生的副效果
完美
正文完