Amaze UI 的垂直对齐的原理为把父容器内的 “幽灵”元素(使用伪元素)高度设置为 100%,再通过设置需要对齐的元素 vertical-align 属性实现
看了一下他的实现原理,是在div块中需要垂直居中的div块前再插入一块隐藏的区块来达到垂直居中显示的效果。
他的代码为
<div class="am-vertical-align" style="height: 150px;">
<div class="am-vertical-align-middle">
飘在半空中的 XX
</div>
</div>
如果是自己写样式的话如下
.parent {
display:inline-block;
border:1px solid #000;
height:100px;
width:100px;
text-align:center;
vertical-align:middle;
font-size:0;
}
.parent:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.child {
vertical-align:middle;
display:inline-block;
max-width:100%;
font-size:1.6rem;
}
<div class="parent">
<div class="child">
飘在半空中的 XX
</div>
</div>