标签:
通常在做响应式排版的时候,元素的高度不是固定不变的,所以不能通过写死元素的高度来实现元素的上下居中。这个时候就需要通过使用 下面这种方式来实现元素相对于父级元素始终上下居中。
html 结构:
<div class="parent"> <div class="child child1"></div> <div class="child child2"></div> <div class="child child3"></div> <div class="child child4"></div> </div>
css 代码:
.parent { height: 100px; width: 100%; } .parent::after { display: inline-block; content: ‘‘; font-size: 0; height: 100%; vertical-align: middle; } .child { display: inline-block; vertical-align: middle; max-height: 100%; }
如何用 inline-block 实现元素相对于父级元素上下居中
标签:
原文地址:http://www.cnblogs.com/alicePanZ/p/4771197.html