html中心垂直对齐不工作

Question

我在这里有这个简单的问题，之前在很多地方都有用。 我试图在div内垂直和中心对齐项目。在这段代码中，margin-left有效，但是margin top没有，我尝试将其更改为更大的值，仍然没有效果。

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
}

<div class="footer">
    <section style="margin-left:15px; margin-top:10px;">FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>

Answer 1

删除内联样式，在页脚上使用带有flex-direction: column; justify-content: center;和text-align center;的Flexbox。

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="footer">
    <section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>

Answer 2

使用flexbox提示只需@ rprm192说。但是，如果您想使其更简单并支持旧浏览器，则可以使用line-height。这是你的代码

.footer {
  height: 50px;
}
.footer section {
  height: 100%;
  line-height: 50px; //make it same as height value
}