我有以下资料:

#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-LMLPHP
我希望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/

10-12 00:14
查看更多