如何把h4和h1放在背景圖片的中間？

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

的事情是，在headwraper格，有一個背景圖像和我想盡一切辦法把我的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>

感謝。

來源

2017-09-08 Thobias Cerqueira

請包括樣式。 – corix010

對不起，我在這裏是一個新手。我剛剛接受了所有的答案。謝謝你們！ –

這可能會幫助：

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

欣賞它是否有效。

來源

2017-09-08 05:17:04

非常感謝。 –

它再次感謝。 –

接受答案，如果它 –

請添加下面的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%; 
}

來源

2017-09-08 04:08:31 webtrackstudio

非常感謝。 –

它再次幫助我很多謝謝！ –

的padding-top: 750px;是推動你的物向下。我嘗試刪除它，並將其添加到您的#headwrapper。

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

來源

2017-09-08 04:21:01 drinesteban

非常感謝。 –

你釘了它。恰恰在我想要的地方。再次感謝。 –

如何把h4和h1放在背景圖片的中間？

回答

相關問題