我想弄清楚如何在图像中间正确定位文本。我设法让它居中,但只是在图像的最顶部,而不是在中间。
#ImageMain {
background-image: url(C:/Users/Gabriel/Downloads/bg.jpg);
width: 80%;
height: 700px;
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
opacity: 0.8;
}
#TextMain h1 {
font-size: 100px;
font-family: "PT Sans", sans-serif;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
</div>
</div>
这可以使用flex
css 中的属性来实现:
#ImageMain {
background:#eee;
width: 80%;
height: 700px;
position: relative;
display:flex;
align-items:center;
justify-content:center;
}
#TextMain h1 {
font-size: 100px;
font-family: "PT Sans", sans-serif;
text-align:center;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句