我试图将 h3 和 p 元素集中在 div 中,更准确地说是 Bootstrap 的 .carousel-caption 。我已经给 .carousel-caption 固定的高度和宽度。我试图将 h3 和 p 垂直对齐到 theid 父 div 的中心,如下所示:
–––––––––––––––––––––––––––––––––––––––––––––––
|.carousel-caption |
| |
| |
| –––––––––––––––––––––––––––––––––––––––––– |
| |h3 | |
| –––––––––––––––––––––––––––––––––––––––––– |
| –––––––––––––––––––––––––––––––––––––––––– |
| |p | |
| | | |
| –––––––––––––––––––––––––––––––––––––––––– |
| |
| |
| |
–––––––––––––––––––––––––––––––––––––––––––––––
我在这个小提琴中有代码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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)