在图像中间居中文本

罗杰·范

我想弄清楚如何在图像中间正确定位文本。我设法让它居中,但只是在图像的最顶部,而不是在中间。

#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>

赫曼特

这可以使用flexcss 中的属性来实现

#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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章