在另一个 div 内垂直对齐 div 没有 flex

Question

如何使用属性vertical-align:middle在另一个 div 内垂直对齐 div。

这是我的代码。

 .hello { height: 100px; width: 100px; background-color: black; vertical-align: middle; display: inline-block; color: white; } .parent { height: 400px; width: 400px; border: 1px solid red; display: table-cell; }

 <div class ="parent "> <div class="hello"> hello </div> </div>

我提到并发现给父表单元格属性和子行内块工作，但仍然没有。

html

Answer 1

给你。

代码片段：

 .hello { height: 100px; width: 100px; background-color: black; vertical-align: middle; display: inline-block; color: white; } .parent { height: 400px; width: 400px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; }

 <div class="parent "> <div class="hello"> hello </div> </div>

Answer 2

Vertical-align 仅适用于 display: table-cell，在某些浏览器中你应该用 display: table 包裹 parent

.hello {
  height: 100px;
  width: 100px;
}

.parent {
  height: 400px;
  width: 400px;
  display: table-cell;
  vertical-align: middle;
}

<div class ="parent ">
  <div class="hello">
    hello
  </div>
</div> 

Answer 3

在.parent上使用vertical-align: middle并制作.hello - display: block with margin: 0 auto ，例如：

.hello {
  display: block;
  margin: 0 auto;
}

.parent {
  display: table-cell;
  vertical-align: middle;
}

看看下面的片段：

 .hello{ height:100px; width:100px; background-color:black; display: block; margin: 0 auto; color: white; } .parent{ height:400px; width:400px; border:1px solid red; display: table-cell; vertical-align: middle; }

 <div class ="parent "> <div class="hello"> hello </div> </div>

希望这有帮助！