Question

我有这种情况。 HTML：

https://codepen.io/JT_Cerqueira/full/YxOLxg/

问题是，在headwraper div上，有一个背景图像，我尝试了所有内容将我的h1和h4句子放在背景图像的中间，但我只是不知道该怎么做。当然没有想法。

有人可以帮忙吗？

<div id="headwraper">
    <div class="container-fluid">
     <div class="row">
      <div class="col-sm-6 col-sm-offset-3 col-xs-12">
        <h4>HELLO WORLD, I'M</h4>
        <h1>JT CERQUEIRA</h1>
        <h4>FRONT END WEB DEVELOPER AIMED AT FULL STACK</h4>
      </div>
    </div>
   </div>  
  </div>

感谢。

Answer 1

请在下面添加css，它会使h1，h4和p标签垂直和水平居中，我添加了类mybox

 <div class="col-sm-6 col-sm-offset-3 col-xs-12 mybox">
        <h4>HELLO WORLD, I'M</h4>
        <h1>JT CERQUEIRA</h1>
        <h4>FRONT END WEB DEVELOPER AIMED AT FULL STACK</h4>
      </div>
.mybox {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    margin: 0px !important;
    left: 50%;
}

Answer 2

padding-top: 750px;正在推动你的内容。我尝试删除它并将其添加到#headwrapper。

display: flex;
flex-direction: column;
justify-content: space-around;

Answer 3

这可能有所帮助：

只需更改以下内容， padding-top:50px; min-height:770px;。那样做。

欣赏它是否有效。

如何将h4和h1放在背景图像的中间？

3 个答案: