乐趣区

img-图片与文字对齐图标与标题对齐

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

  1. <img><h5> 都以 block 显示
  2. <img> 设置高度与 <h5> 一致,此时 <img> 会自动等比例缩放到这个高度
  3. <img> float: left,此时 <img> 就会脱离布局
  4. <h5> 设置 padding-left,并大于 <img> 的宽度,<img> 就会出现在 <h5> 的左边,两者重叠
  5. 最好在父元素 div 上添加一个 clearfix 抵消掉上面 float 产生的副效果

完美

退出移动版