究竟什么时候使用line-height合适——line-height的实际应用

1. 单行文字的垂直居中对齐 #

把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于 height，把 line-height 设置为您需要的 box 的大小可以实现单行文字的垂直居中，height 是多余的。

代替 height，避免 IE6/IE7 中的 haslayout。

2. 多行文字的垂直居中 #

要实现高度不固定的文字垂直居中使用 padding 就好了。对于高度固定的 div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于 line-height。

3. 图片的垂直居中 #

对于图片的垂直居中，可以使用以下方法：

.container {
  line-height: 200px; /* 容器高度 */
}
.container img {
  vertical-align: middle;
}

4. 消除图片底部间隙 #

当图片与文字混排时，经常会出现图片底部有间隙的问题，解决方法：

• 图片块状化-无基线对齐

  img {
    display: block;
  }
  

• 图片底线对齐

  img {
    vertical-align: bottom;
  }
  

5. 行高足够小-基线位置上移 #

.box {
  line-height: 0;
}