关键词:bootstrap 4,vertical alignment,grid systerm
问题:按照Bootstrap 4 官方文档的说明。应用.align-items-center可以使元素垂直居中:
Bootstrap 4 垂直居中示例.png
官方示例代码:
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
将官方示例代码复制粘贴到新文档,在浏览器中打开:
官方示例代码实际的效果.png
垂直的居中的效果并没有实现。
解决办法:给要垂直居中的元素所在的row加一个高度,
Hello, world!div {
border-style: solid;
border-width: 1px;
}
.row,.container {
height: 30vh;
}
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
总结:
将垂直居中的元素包裹在.row中,再用.container包裹,并给.row设置一个高度。