Bootstrap4 垂直对齐
作者:互联网
在栅格系统中可以使用垂直对齐。
- 行的垂直对齐
- 上对齐
align-items-start
- 居中对齐
align-items-center
- 下对齐
align-items-end
- 上对齐
- 单元格的垂直对齐
- 上对齐
align-self-start
- 居中对齐
align-self-center
- 下对齐
align-self-end
- 上对齐
示例
<div class="container">
<p>垂直对齐</p>
<p>垂直对齐 - 上对齐 - align-items-start</p>
<div class="row align-items-start" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>垂直对齐 - 居中对齐 - align-items-center</p>
<div class="row align-items-center" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>垂直对齐 - 下对齐 - align-items-end</p>
<div class="row align-items-end" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>单元格的垂直对齐 align-self-start align-self-center align-self-end</p>
<div class="row" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>
标签:items,align,three,垂直,Bootstrap4,对齐,self,columns 来源: https://www.cnblogs.com/freepc/p/16182182.html