我试图将h3和p元素放在div(更确切地说是Bootstrap的.carousel-caption)内。我给了.carousel-caption固定的​​高度和宽度。我正在尝试将h3和p垂直对齐到theid父div的中心,如下所示:

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

我在至少与Chrome兼容的小提琴http://jsfiddle.net/pYjnF/中有代码,但我正在尝试实现对桌面C28 + FF22 + S6 IE10的浏览器支持以及对iOs 6+ Safari和Android 4.0+ Chrome的移动支持。

有什么建议么?

最佳答案

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

关于twitter-bootstrap - 在带有Flexbox的Bootstrap3轮播中垂直居中放置内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19070256/

10-11 22:25
查看更多