我想有一个垂直的菜单与特定的高度。
每个子元素必须填充父元素的高度,并且文本必须居中对齐。
子节点的数量是随机的,所以我必须使用动态值。
Div .container包含随机数量的子元素(.item),这些子元素总是要填充父元素的高度。为了实现这一点,我使用了flexbox。
为了使链接与文本对齐到中间,我使用显示:表格单元格技术。但是使用表格显示需要使用100%的高度。
我的问题是。item-inner {height: 100%}不工作在webkit (Chrome)。
有解决这个问题的方法吗?
或者有不同的技术,使所有的。item填充父的高度与文本垂直对齐到中间?
这里的例子jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>