中心内容垂直于旋转木马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的

回答

相关问题