代码之家 › 专栏 › 技术社区 › Sumchans

HTML居中垂直对齐不起作用

css3 html5

0

Sumchans · 技术社区 · 6 年前

我这里有一个简单的问题,以前在很多地方都有效。我试图在垂直和中心对齐div中的项。在这段代码中,左边距起作用,但左边距顶部不起作用,我尝试将其更改为更大的值,但仍然没有任何效果。

.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>

2 回复 | 直到 6 年前

1

rpm192 6 年前

移除内联样式,使用flexbox flex-direction: column; justify-content: center; 和 text-align center; 在页脚。

.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>

2

0

Bariq Dharmawan 6 年前

使用flexbox提示@rprm192。但是如果你想让它更简单并且支持旧的浏览器,你可以使用 line-height . 这是你的密码

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