HTML元素未在Flex中心垂直居中 [英] Html element is not vertically centered with flex center
本文介绍了HTML元素未在Flex中心垂直居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
那是我的小提琴: http://jsfiddle.net/atav8vzz/4/
为什么类 vertical-align的html元素未垂直居中?
Why is the html element with class "vertical-align" not vertically centered?
<div class="container">
<div class="row">
<div style="background:green;" class="col-xs-4">
<h3 class="text-center">Type 1</h3>
</div>
<div style="background:red;" class="col-xs-4">
<h3 class="text-center vertical-align">Type 2</h3>
</div>
<div style="background:blue;" class="col-xs-4">
<h3 class="text-center">Type 3</h3>
</div>
</div>
</div>
.vertical-align {
display: ms-flex;
display: flex;
align-items: center;
}
推荐答案
我想这取决于您试图在这里实现。 align-items
是垂直进行的。在合理化内容
的情况下是水平的。
I guess it depends what you're trying to achieve here. align-items
does so vertically. Where as justify-content
does so horizontally.
请参见此示例。我已给出< h3>
的高度,以说明其垂直居中。
See this example. I have given the <h3>
height, to illustrate that it is centred vertically.
这篇关于HTML元素未在Flex中心垂直居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文