一、垂直对齐的定义
垂直对齐是指将文本在垂直方向上相对于容器进行定位,使其居中、顶部对齐、底部对齐或基线对齐等效果。在CSS中,有多种方式实现垂直对齐。
二、使用line-height属性实现单行文字垂直对齐
对于单行文字垂直对齐,最简单的方法是使用line-height属性。将line-height属性设置为与容器高度相同的值,就可以实现单行文字在容器中的居中、顶部对齐或底部对齐。
.container { height: 100px; line-height: 100px; /* 垂直居中 */ } .container { height: 100px; line-height: 50px; /* 垂直顶部对齐 */ } .container { height: 100px; line-height: 150px; /* 垂直底部对齐 */ }
三、使用display和vertical-align属性实现多行文字垂直对齐
对于多行文字垂直对齐,line-height属性的效果会出现问题。此时可以使用display和vertical-align属性来实现。设置display为table-cell,使得元素表现为表格单元格,然后设置vertical-align为middle,就可以实现多行文字的垂直居中。
.container { height: 100px; display: table-cell; vertical-align: middle; /* 垂直居中 */ }
为了兼容IE6和7,还需在容器的父元素中加入display:table属性。
四、使用flexbox布局实现弹性垂直对齐
flexbox是CSS3中的新布局模式,可以方便地实现弹性布局。对于多行文字垂直对齐,可以使用flexbox布局来实现。设置容器的display为flex,然后使用align-items属性,设置子元素在垂直方向上的对齐方式。
.container { height: 100px; display: flex; align-items: center; /* 垂直居中 */ } .container { height: 100px; display: flex; align-items: flex-start; /* 垂直顶部对齐 */ } .container { height: 100px; display: flex; align-items: flex-end; /* 垂直底部对齐 */ }
五、注意事项
1、设置line-height时应该采用相对单位或无单位,而不是绝对单位。因为绝对单位在不同的设备上显示效果可能会不一样。
2、使用flexbox布局需要注意浏览器兼容性问题,建议使用前进行兼容性检测。
3、在使用table-cell布局时,容器的父元素需要设置display为table才能生效。