2017-07-11 174 views
0

所以我有兩個元素,在我的情況下的圖像和按鈕。我在頁面頂部有圖片,底部有按鈕。我想有一個div(或某些其它元件)來顯示文本,但我需要它的兩個元件之間的中心。圍繞兩個元素之間的一個div垂直

<div style="text-align: center;"> 
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" /> 
<div style="text-align: center; border: 3px solid blue;">Help</div> 
<button style="position: absolute; bottom: 5px;">Hi</button></div> 

JSFIDDLE

我使用HTML和Javascript。

+0

[本文](http://vanseodesign.com/css/vertical-centering/)幫我垂直居中的CSS元件。 –

+0

的可能的複製[如何verticaly對準到與定義寬度/高度一個div的內容的中心?](https://stackoverflow.com/questions/10968726/how-to-verticaly-align-into-the-中心的最內容的-A-DIV-具有定義-WIDT) –

回答

0

你可以使用flexbox,這在其他的答案建議。雖然有時你可能很難糾纏,但是在你第一次嘗試時就會遇到困難。儘管強烈建議將flexbox添加到工具帶上。

爲了解決這個問題可能更簡單: 1.)你可以設置父div的高度(無論你想要什麼),然後在你想要居中的元素上設置margin-top。你可以調整它,直到它正確。 或者...... 2)另外:您也可以設置的位置是:相對的;和頂部:100像素(或任何其設置到中間設置位置的規則將允許您設置頂部或左側,右側或底部沒有設置位置規則,你不能使用這些規則

0

。創建一個<div></div>持有任何你希望把它再處理與CSS文本。

0

Flexbox,就提供了最好的,並從傳統的解決方案短期解決方案。 您可以在這裏找到工作小提琴https://jsfiddle.net/rr0e4qh7/14/

你的HTML

<div class="container"> 
     <div class="image"> 
      <img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" /> 
     </div> 
     <div class="text"> 
      Help 
     </div> 
     <div class="btn"> 
      <button> 
      My Button 
      </button> 
     </div> 
    </div> 

這裏是CSS部分

.container{ 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    justify-content: center; 
    align-items: center; 
} 
.text{ 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center 
}