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;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。