.components{
background-color: #1DA1F2;
text-align: left;
height: 100vh;
padding: 20px;
}
我在围绕内容的外部div上使用了height:100vh,但是我无法使div内容在屏幕中间对齐。那怎么办呢?最外面的div是.components,内部的div是.row
最佳答案
我在下面做了一个简单的例子(希望我明白你想要什么)
只需在display:flex;align-items:center
上添加.components
即可。我使用了bootstrap,但只是为了让cols并排保持。不管您如何布置布局,是否引导,display:flex
都可以
.components {
background-color: #1DA1F2;
text-align: left;
height: 100vh;
padding: 20px;
display:flex;
align-items:center;
}
.row {
width:100%;
}
.col-sm-4 {
background:red;
height:50px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="components">
<div class="row">
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
</div>
</div>
关于html - 如何将div的内容与高度100vh中间对齐?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47334164/