网络日志

vertical-align 属性

vertical-align 通常用于设置图片或者表单和文字的垂直对齐,只对于行内元素或行内块元素有效。

img {
  /* 默认,元素放在父元素基线上 */
  vertical-align: baseline;

  /* 元素的顶端于行中最高元素的顶端对齐 */
  vertical-align: top;

  /* 元素放在父元素的中部 */
  vertical-align: middle;

  /* 元素的底部和整行的底部对齐 */
  vertical-align: baseline;
}

图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐,将属性设置为 middle,就可以让文字和图片垂直居中对齐了。


有个奇怪的现象,如果将图片和文字放在一行,图片底部会有一条缝隙,我们给其父元素加个边框看起来更明显一点:

这是因为图片默认是和文字的基线对齐的,常用的解决方法有两种:

1、给图片添加 vertical-align 属性,值设为 middle / top / bottom

img {
  vertical-align: top | middle | bottom;
}

2、把图片转换为块级元素

img {
  display: block;
}