我试图将 h3 和 p 元素置于 div 的中心,Bootstrap 的 .carousel-caption 更准确。我给了 .carousel-caption 固定的高度和宽度。我正在尝试将 h3 和 p 垂直对齐到父 div 的中心,如下所示:

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

我在这个 fiddle 中有代码 http://jsfiddle.net/pYjnF/这至少适用于 Chrome,但我正在努力实现对桌面 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>     


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!