我试图将 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>