我唯一的问题是我想把菜单放在 div 的中间，然后我尝试插入垂直对齐，因为它已经具有 inline-block 样式属性，但老实说我不知道为什么。为什么另一个div是生效的，而不是我想生效的。
这是我的例子:
.content{
width: 100%;
height: 90%;
}
.middle{
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.menu{
width: 70%;
height: 80%;
}
.three {
width: 30%;
}
.six{
width: 60%;
}
.inline {
display: inline-block;
}
.h-80{
height: 80%;
}
.h-100{
height: 100%;
}<div class="content middle">
<div class="menu">
<div class="three inline h-80">
this is taking effect
</div>
<div class="six inline h-100" style="vertical-align: middle;">
while I inputing vertical align here
</div>
</div>
</div>您可以运行代码片段来检查我的问题的真实性，哦，我尝试了 chrome 和 moz，两者都显示相同的结果。虽然我是菜鸟，但我知道发生了什么，直到尝试了 3 个小时..
最佳答案
vertical-align 是一个奇怪的 CSS 属性。我在 .inline 元素周围添加了边框以显示效果。
第二个 div 与父容器的基线居中对齐。第一个隐含了 vertical-align: baseline 并且它坚持了这一点。
.content{
width: 100%;
height: 90%;
}
.middle{
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.menu{
width: 70%;
height: 80%;
}
.three {
width: 30%;
}
.six{
width: 60%;
}
.inline {
display: inline-block;
border: 1px solid;
}
.h-80{
height: 80%;
}
.h-100{
height: 100%;
}<div class="content middle">
<div class="menu">
<div class="three inline h-80">
this is taking effect
</div>
<div class="six inline h-100" style="vertical-align: middle;">
while I inputing vertical align here
</div>
</div>
</div>如果我将 vertical-align:middle 放在两个 div 上，您会看到容器都居中对齐，而 content那些 div 不是。
.content{
width: 100%;
height: 90%;
}
.middle{
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.menu{
width: 70%;
height: 80%;
}
.three {
width: 30%;
}
.six{
width: 60%;
}
.inline {
display: inline-block;
border: 1px solid;
}
.h-80{
height: 80%;
}
.h-100{
height: 100%;
}<div class="content middle">
<div class="menu">
<div class="three inline h-80" style="vertical-align: middle">
this is taking effect
</div>
<div class="six inline h-100" style="vertical-align: middle;">
while I inputing vertical align here
</div>
</div>
</div>您还需要将内容的对齐方式设置为居中。唉，这不能用相同的技术来完成。为此，我将使用 flexbox 和 display: inline-flex;对齐元素:居中。对于替代方案，请查看以下问题:How do I vertically align text in a div?
.content{
width: 100%;
height: 90%;
}
.middle{
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.menu{
width: 70%;
height: 80%;
}
.three {
width: 30%;
}
.six{
width: 60%;
}
.inline {
display: inline-flex;
align-items: center;
border: 1px solid;
}
.inline span {
vertical-align: middle;
}
.h-80{
height: 80%;
}
.h-100{
height: 100%;
}<div class="content middle">
<div class="menu">
<div class="three inline h-80" style="vertical-align: middle">
this is taking effect
</div>
<div class="six inline h-100" style="vertical-align: middle;">
while I inputing vertical align here
</div>
</div>
</div>进一步调整:你可以完全放弃内联 block ，到处使用 flexbox
.middle, .menu, .three, .six {
display: flex;
align-items: center;
}
.content {
width: 100%;
height: 90%;
}
.middle, .menu, .three, .six {
display: flex;
align-items: center;
}
.middle {
position: fixed;
justify-content: center;
flex-direction: column;
}
.menu {
width: 70%;
height: 80%;
}
.three {
width: 30%;
background-color: gold;
}
.six {
width: 60%;
background-color: silver;
}
.h-80 {
height: 80%;
}
.h-100 {
height: 100%;
}<div class="content middle">
<div class="menu">
<div class="three h-80" style="vertical-align: middle">
this is taking effect
</div>
<div class="six h-100" style="vertical-align: middle;">
while I inputing vertical align here
</div>
</div>
</div>关于html - chrome 和 moz 中的垂直对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57708156/