我有以下资料:
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
display: table-cell;
vertical-align: middle;
border-style: solid;
border-width: 1px;
}
#outterFields {
background-color: red;
width: 60%;
min-width: 300px;
height: 300px;
}
#outterFields div {
display: inline-block;
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel">
<div>hello</div>
</div>
</div>
</div>
我搞不懂为什么内心最深处的人不集中?我确实看了一些关于居中的答案,但是我看不出问题是什么……
我希望hello垂直居中,而不是水平居中。所有其他div的位置都是我想要的。其他div没有错误,它们并排放置是有原因的。我唯一想要的改变是hello div垂直移动到中间
最佳答案
你只是把你的内心深处
#outterFields div {
display: inline-block;
}
只要把它取下来,或者如果你打算让一个直接的孩子这么做:
#outterFields > div {
display: inline-block;
}
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
display: table-cell;
vertical-align: middle;
border-style: solid;
border-width: 1px;
}
#outterFields {
background-color: red;
width: 60%;
min-width: 300px;
height: 300px;
}
#outterFields div {
/* display: inline-block; */
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel">
<div>hello</div>
</div>
</div>
</div>
关于html - 使用显示:表格在div内居中div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38205386/