中心內容垂直於旋轉木馬Bootstrap3與Flexbox的

我試圖居中一個div內H3和p元素，引導的.carousel字幕更準確。我給了.carousel-caption固定的高度和寬度。我想垂直對齊H3和P一起theid父DIV像這樣的中心：中心內容垂直於旋轉木馬Bootstrap3與Flexbox的

  ––––––––––––––––––––––––––––––––––––––––––––––– 
      |.carousel-caption       | 
      |            | 
      |            | 
      | –––––––––––––––––––––––––––––––––––––––––– | 
      | |h3          | | 
      | –––––––––––––––––––––––––––––––––––––––––– | 
      | –––––––––––––––––––––––––––––––––––––––––– | 
      | |p          | | 
      | |          | | 
      | –––––––––––––––––––––––––––––––––––––––––– | 
      |            | 
      |            | 
      |            | 
      –––––––––––––––––––––––––––––––––––––––––––––––

我有一些代碼在這個小提琴http://jsfiddle.net/pYjnF/的作品至少有Chrome，但我試圖實現對桌面瀏覽器支持C28 + FF22 + S6 IE10和iOS的Safari瀏覽器6+的Android & 4.0+ Chrome行動的支持。

有什麼建議嗎？

來源

2013-09-28 user2795613

得到消息，以檢查此http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/和事實證明，該解決方案實際上是尷尬簡單http://jsfiddle.net/pYjnF/1/

<div class="carousel-caption flex" style="display: flex; align-items: center;"> 
    <div> <!-- div which content is not aligned --> 
     <h3>Headline lorem ipsum dolor</h3> 
     <p>Story gnis dis dolor re niet, sed quia se perferciaes eossedit, susam, sam voluptas sandebi stiusam, cuptaturem sequis imi, is etur</p> 
    </div> 
</div>

來源

2013-10-02 19:57:21 user2795613

你救了我的一天。爲此歡呼！ –

好的解決方案。但是，您的代碼需要CSS部分的輪播標題的高度值。在正常情況下，此高度值與背景圖像的高度值相同。檢查此代碼。 http://jsfiddle.net/n86hLyLu/1/ –

中心內容垂直於旋轉木馬Bootstrap3與Flexbox的

回答

相關問題