行高

发表于 | 分类于

line-height 行高

  • 行高影响盒子模型
  • line-height和font-size的计算之差分为两半，添加在字体顶部和底部
  • 行高受font-size和font-family影响
  • 定义是每行的之间最小距离
  • 文字盒子模型是行高撑起的

运用

单条文本垂直居中

图片垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="test1">
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.test1 {
  font-size: 0;
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  line-height: 150px;
}
.item img {
  width: 100%;
  vertical-align: middle;
}

vertical-align 垂直居中

前提

  • 只能在图片、单元格、inline-block元素起作用
  • 只和父标签关系，vertical-align的本质上是个独立的个体
  • middle元素和父元素中心的对齐

运用

小图标居中

1
2
3
4
.icon {
  display: inline-block;
  vertical-align: -5px;
}

多行文本居中

1
2
3
4
<div class="test1">
 <span class="item">我是文字<br>我是文字<br>我是文字<br>我是文字<br></span>
 <i></i>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test1 {
  text-align: center;
  height: 200px;
  background-color: #eee;
}
.item {
  display: inline-block;
  vertical-align: middle;
}
/*辅助元素 撑开父元素的内联盒子*/
i {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}