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