<分区>
<分区>
正如我在标题中所说，我试图将文本在 div 上居中 - 垂直和水平，但没有成功。请检查我的代码，帮我看看问题出在哪里。
HTML 代码:
<div id="wrapper">
<div id="top">
<div class="container-fluid text-center">
<div id="top-rectangle" class="mid">
<p>
Hello, text and text.
</p>
<p>
More text
</p>
</div>
</div>
</div>
CSS 代码:
body {
height: 100%;
margin: 0;
}
#wrapper {
display: table;
width: 100%;
}
#top {
height: 0;
display: table-row;
vertical-align: middle;
}
#top-rectangle {
height: 450px;
background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
background-size: cover;
color: white;
}
.midSection {
text-align: center;
vertical-align: middle;
display: table-cell;
}
JSFIDDLE: https://jsfiddle.net/krgtdomh/
注意:请知道我搜索了一个答案并看到了一些，但我仍然不明白我的代码有什么问题，文本没有居中。
最佳答案
检查这个:https://jsfiddle.net/krgtdomh/1/
我添加了:
.outer {
display: table;
position: absolute;
height: 450px;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
我在 #top-rectangle 中添加了 display:block; 并将高度更改为 450px。
我用了this回答到那里
关于html - 我正在尝试将文本垂直和水平居中在 div 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34749342/