Question

我试图将div中的h3和p元素集中在一起，Bootstrap的.carousel-caption更精确。我给了.carousel-caption固定的高度和宽度。我试图将h3和p垂直对齐到父div的中心，如下所示：

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

我在这个小提琴http://jsfiddle.net/pYjnF/中的代码至少适用于Chrome，但我正在努力实现对桌面C28 + FF22 + S6 IE10的浏览器支持以及对iOs 6+ safari＆amp; Android 4.0+ Chrome。

有什么建议吗？

Answer 1

得到提示检查此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>

使用flexbox在Bootstrap3轮播中垂直居中内容

1 个答案: