在带Flexbox的Bootstrap3旋转木马中垂直居中放置内容 [英] Center content vertically in Bootstrap3 carousel with flexbox

问题描述

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

I am trying to center h3 and p elements inside a div, Bootstrap's .carousel-caption to be more exact. I have given .carousel-caption fixed height and width. I am trying to align h3 and p together vertically to the center of theid parent div like this:

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

我有这个小提琴的代码 http://jsfiddle.net/pYjnF/ 至少与Chrome一起工作，但我正在尝试实现桌面C28 + FF22 + S6 IE10的浏览器支持以及iOs 6+ Safari浏览器的移动支持&安培; Android 4.0+ Chrome。

I have code in this fiddle http://jsfiddle.net/pYjnF/ that works at least with Chrome but i am trying to achieve browser support for desktop C28+ FF22+ S6 IE10 and mobile support for iOs 6+ safari & Android 4.0+ Chrome.

有什么建议吗？

推荐答案

小费来检查这个 http://philipwalton.github.io/solved-通过flexbox /演示/ vertical-centering / ，事实证明，解决方案实际上是令人尴尬的简单 http ：//jsfiddle.net/pYjnF/1/

Got a tip to check this http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ and it turned out that the solution was actually embarrassingly simple 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旋转木马中垂直居中放置内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！