更改时如何实现垂直对齐<div> block 大小(在我的示例中 - 绿色 block )。
在我的示例中需要更改的是，当调整浏览器窗口大小时发生垂直对齐(中间)边 block 。
vertical-align: middle或 top : calc(50% - 25px)属性不起作用。
例子: http://jsfiddle.net/vsdu0cn8
我的情况和需要什么
(来源:imageup.ru)
代码:
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
font-size: 0px;
}
.menu-block {
max-width: calc(2 * 75px + 7 * (50px + 2 * 5px));
background-color: #ff8080;
}
.menu-block .menu-edge {
display: inline-block;
position: relative;
left: 0px;
width: 75px;
height: 50px;
vertical-align: top;
background-color: #80ff80;
}
.menu-block .menu-container {
display: inline-block;
width: calc(100% - 2 * 75px);
text-align: center;
background-color: #ff80ff;
}
.menu-block .menu-container .menu-element {
display: inline-block;
width: 50px;
height: 50px;
margin: 0px 5px;
font-size: 20px;
background-color: #ffff80;
}
</style>
</head>
<body>
<div class='menu-block'>
<div class='menu-edge'></div>
<div class='menu-container'>
<div class='menu-element'>#1</div>
<div class='menu-element'>#2</div>
<div class='menu-element'>#3</div>
<div class='menu-element'>#4</div>
<div class='menu-element'>#5</div>
<div class='menu-element'>#6</div>
<div class='menu-element'>#7</div>
</div>
<div class='menu-edge'></div>
</div>
</body>
</html>最佳答案
通过使用 display:flex 设置容器，您可以使用 align-items: center 使文本垂直居中。
请查看更新后的 JSFiddle :
HTML:
<div class = 'menu-block'>
<div style="display:flex; align-items: center">
<div class = 'menu-edge'></div>
<div class = 'menu-container'>
<div class = 'menu-element'>#1</div>
<div class = 'menu-element'>#2</div>
<div class = 'menu-element'>#3</div>
<div class = 'menu-element'>#4</div>
<div class = 'menu-element'>#5</div>
<div class = 'menu-element'>#6</div>
<div class = 'menu-element'>#7</div>
</div>
<div class = 'menu-edge'></div>
</div>
</div>
关于html - 更改<div> block 大小时如何实现垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36384538/