html居中垂直对齐不起作用
html居中垂直对齐不起作用
提问于 2018-06-03 04:20:12
我在这里有一个简单的问题，以前在很多地方都有效。我正在尝试将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
Stack Overflow用户
回答已采纳
发布于 2018-06-03 04:29:10
删除内联样式，在页脚使用带有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>
Stack Overflow用户
发布于 2018-06-04 00:01:43
只需@rprm192就可以使用flexbox提示。但是如果你想让它更简单并支持更老的浏览器，你可以使用line-height。以下是为您编写的代码
.footer {
height: 50px;
}
.footer section {
height: 100%;
line-height: 50px; //make it same as height value
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50660840
复制相关文章
相似问题