<分区>
<分区>
正如标题所述，我已经尝试搜索，但我无法获得带有文本的边框，使其位于背景图像的中心。截至目前，它只是居中但坚持顶部(如果这有意义的话)。
.banner {
background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg");
background-size: cover;
background-position: bottom center;
height: 400px;
width: 100%;
}
#banner-content {
border: 1px solid #FFF;
margin: auto;
text-align: center;
width: 40%;
} <div class="banner">
<div id="banner-content">
<h1>Random misc text for the purpose of practicing</h1>
</div>
</div>提前感谢您的帮助!
最佳答案
添加display: flex;到banner类；并将 display: inline-flex 添加到您的 banner-content ID 中。如这里:
.banner {
background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg");
background-size: cover;
background-position: bottom center;
height: 400px;
width: 100%;
display: flex;
}
#banner-content {
border: 1px solid #FFF;
margin: auto;
text-align: center;
width: 40%;
display: inline-flex;
} <div class="banner">
<div id="banner-content">
<h1>Random misc text for the purpose of practicing</h1>
</div>
</div>已编辑
如果您不希望文字在屏幕较小时超出边框，请将此代码添加到您的样式中:
.banner h1{
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}
关于html - 无法将边框与图像内部的文本居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41417279/