將文本移動到div的中間頂部，而不會使div更小

所以我嘗試了其他帖子上的一些建議，但我似乎只是強迫我的整個圖像區域變小，當我將文本移動到頂部標題區域的中心。將文本移動到div的中間頂部，而不會使div更小

我想將'我們是..'文本放在頂部中心（圖片上的黃色文本）。我已經嘗試使用填充/邊距並對齊內容，但它只是迫使整個區域變小。關於如何強制文本向上的任何建議？

下面是部分地區代碼：

<section class="meta-wrapper parallax" style="background-image: url('content/about_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20"> 
      <div id="page_header"> 
       <div class="container text-center"> 
        <h2><span>We are</span><br>Outside The Line</h2> 
       </div> 
      </div><!-- end page_header --> 
     </section><!-- end section -->

這是我在看編輯（此控制文本位置，而且是容器中的CSS ..所以我不知道我是否應該做一些對H2標籤或可能彌補這個新的CSS標籤？

#page_header h2 { 
    color:#fff; 
    border-bottom:0 !important; 
    font-size:50px; 
    text-transform:uppercase; 
} 
#page_header h2 span { 
    font-size:60px; 
    border:3px solid #fff; 
    padding:4px 20px; 
} 

#page_header .container-fluid h2 { 
    left:10%; 
    bottom:15%; 
    position: absolute;

我曾嘗試垂直對齊等，但這只是做什麼..我猜我需要發揮與周圍的填充等，但我似乎越來越在得到這個不動，一切動了一下卡住..

來源

2016-07-14 Daniel Hobbs

更改此：

#page_header{ 
    padding:30rem 0 ; 
}

爲此：

#page_header { 
    padding: 0 0 60rem; 
}

的想法是保留填充（60rem）的總量，但將所有的填充至底部，而不是均勻地塗在頂部和底部。

來源

2016-07-14 18:19:38 smarx

謝謝！這很好，但推得有點過高，但這使得我需要去修改的地方變得更加清晰。謝謝加載:) –

更換你的CSS是這樣的：

#page_header .container { 
    z-index: 1; 
    position: absolute; 
    top: 20px; 
    left: 45%; 
    text-align: center; 
}

來源

2016-07-14 18:19:51

謝謝！這似乎把它推到右上角奇怪..但我應該能夠推動它與此代碼:) –

首先感謝來自兩個誰回答的幫助。

玩過#page_header後，我設法讓標題顯示在我想要的位置。

我使用的代碼是;

#page_header 
    { 
     padding: 10rem 0 60rem!important; 
    }

來源

2016-07-14 19:58:33

將文本移動到div的中間頂部，而不會使div更小

回答

相關問題