HTML居中inline-block的
问题描述：
我试图居中文本是在图像的顶部，但似乎无论什么我也不会居中HTML居中inline-block的
我也用保证金0自动尝试但没”也没有帮助。
#search_box {
\t width: 100%;
\t height: 450px;
\t position: relative;
\t text-align: center;
}
#search_box h1 {
\t display: inline-block;
\t width: 50%;
\t top: 180px;
\t color: white;
\t background-color: red;
\t position: absolute;
}<div id="search_box">
\t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/>
\t \t \t <h1>SOME TEXT</h1>
\t \t </div>
答
这样吗？
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: block;
width: 50%;
top: 180px;
color: white;
background-color: red;
margin: auto;
}<div id="search_box">
<h1>SOME TEXT</h1>
<img src="images/background_search.jpg" alt="search_box_picture"/>
</div>
答
你想是这样的： -
.image {
position:relative;
text-align:center;
}
.text {
left: 0;
position:absolute;
top: 30px;
width: 100%;
}<div class="image">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="text">
Text of variable length
</div>
</div>
答
#search_box {
\t width: 100%;
\t height: 450px;
\t position: relative;
\t text-align: center;
}
#search_box h1 {
\t display: inline-block;
\t width: 50%;
\t top: 180px;
\t color: white;
\t background-color: red;
\t position: absolute;
left:0;
right:0;
margin:0 auto;
}<div id="search_box">
\t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/>
\t \t \t <h1>SOME TEXT</h1>
\t \t </div>根据父div，您的图像位置为中心。 H1标签不居中对齐。你必须留下绝对标签的左侧空间。
#search_box {
\t width: 100%;
\t height: 450px;
\t position: relative;
\t text-align: center;
}
#search_box h1 {
\t display: inline-block;
\t width: 50%;
\t top: 180px;
\t color: white;
\t background-color: red;
\t position: absolute;
left:25%;
}<div id="search_box">
\t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/>
\t \t \t <h1>SOME TEXT</h1>
\t </div>
答
你想是这样的 ？
#search_box {
\t width: 100%;
\t height: 450px;
\t position: relative;
\t text-align: center;
}
#search_box h1 {
display: block;
margin: 0 auto;
width: 50%;
color: white;
background-color: red;
}<div id="search_box">
\t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/>
\t \t \t <h1>SOME TEXT</h1>
\t \t </div>
那么这个问题是不是在图像本身的顶部 –
我编辑的代码。如果你想把文本放在图像的顶部，只需将文本先放在你的html文件之前，我想他想要图像背后的图像 – GvM
。是对的吗？ –