2

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                                       |  |
           | |                                        |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           |                                             |
           |                                             |
           |                                             | 
           –––––––––––––––––––––––––––––––––––––––––––––––

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.

Any suggestions?

4

1 回答 1

8

得到了检查这个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-02T19:57:21.440 回答