HTML中创建网站时,有时我们需要某些元素垂直对齐在框内。可能是将文本或图像在 div 内部中间对齐,或者垂直对齐。
CSS flexbox垂直居中 div 文本 (推荐)
首先,设置div属性为flex,其次设置子元素align-items: center。
html示例:
div {
display: flex;
justify-content: center; /* align horizontal /
align-items: center; / align vertical */
border: 5px solid;
padding: 10px;
}
CSS table-cell 和 vertical-align垂直居中 div 文本
可以通过设置外部标签和内部标签来垂直对齐文本。display: table; 和display: table-cell
html示例:
div {
display: table;
height: 60px;
width: 100%;
border: 5px solid;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
CSS line-height 和 vertical-align垂直对齐div单行文本
单行文本垂直对齐时,此方法很有用。需要在 CSS 中设置相同的 line-height、height 和 vertical-align。
html示例:
div {
height: 60px;
line-height: 60px;
border: 5px solid;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}