vertical-align属性
使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
需要给行内块元素或行内元素设置该属性,其后的文字才会居中。
vertical-align: baseline | top | middle | bottom
值 | 描述 |
---|---|
baseline | 基线对齐,默认。元素放置在父元素的基线上。 |
top | 顶线对齐,把元素的顶端与行中最高元素的顶端对齐。 |
middle | 中线对齐,把此元素放置在父元素的中部。 |
bottom | 底线对齐,把元素的顶端与行中最低的元素的顶端对齐。 |
图片下方有空白的bug:
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
解决方案:
- 给图片添加vertical-align: middle | top | bottom等。(建议使用)
- 把图片转换为块级元素display: block;