让带有宽度的块级元素居中对齐,是margin: 0 auto;
让文字居中对齐,是 text-align: center;
本文讲一下垂直居中的属性.
图片、表单和文字对齐
vertical-align 垂直对齐, 这个看上去很美好的一个属性, 实际有着不可捉摸的脾气。
1 | vertical-align : baseline |top |middle |bottom |
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
默认的图片会和文字基线对齐,我们可以通过vertical-align 控制图片和文字的垂直关系了。
去除图片底侧空白缝隙
有个很重要特性你要记住: 图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决的方法就是:
1.给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2.给img 添加 display:block; 转换为块级元素就不会存在问题了。