![垂直居中项目]( "垂直居中项目")
本文介绍了使用 flexbox 垂直居中项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 CSS 的 flexbox 将项目垂直居中；而且，我知道如何使用非供应商前缀代码来实现，但即使使用供应商前缀，我也无法让它在 Webkit (Chrome) 中工作.
我正在尝试在 #trigger 中垂直对齐跨度.
这是我的 CSS:
#trigger{/* 2009 语法 */显示:-webkit-box；显示:盒子；/* 当前语法 */显示:-webkit-flex；显示:弹性；}#触发跨度{/* 2009 语法 */-webkit-box-align:居中；/* 当前语法 */-webkit-align-items:居中；弹性对齐:居中；}
知道我做错了什么吗?
如果您知道我正在使用的属性的其他供应商前缀/版本，请随时分享它们，以便它不仅可以在 Webkit 中使用.
解决方案
align-items 属性用于 flex 容器(具有 display: flex 应用于它们)，而不是flex items(flex容器的子项).旧的 2009 规范没有与 align-items 相当的属性；2009 年的 box-align 属性与标准规范中的 align-content 匹配.
http://jsfiddle.net/mnM5j/2/
#trigger {显示:-webkit-flexbox；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-flex-align:居中；-ms-flex-align:居中；-webkit-align-items:居中；对齐项目:居中；文本对齐:居中；高度:10em；背景:黄色；}<div id="触发器"><span>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus porta elit vel ante hendrerit facilisis.Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
I'm trying to vertically center items with CSS' flexbox; and, I know how to do it with the non-vendor-prefixed code, but even with the vendor prefixes I can't get it to work in Webkit (Chrome).
I am trying to vertically align the spans in #trigger.
Here is my CSS:
#trigger{
/* 2009 syntax */
display: -webkit-box;
display: box;
/* current syntax */
display: -webkit-flex;
display: flex;
}
#trigger span{
/* 2009 syntax */
-webkit-box-align: center;
/* current syntax */
-webkit-align-items: center;
flex-align: center;
}
Any ideas what I am doing wrong?
And if you know the other vendor prefixes / versions of the properties that I am using, feel free to share them so that this can work in more than just Webkit.
解决方案
The align-items property is for flex containers (elements with display: flex applied to them), not flex items (children of flex containers). The old 2009 spec does not have a property comparable to align-items; the box-align property from 2009 matches up to align-content from the standard spec.
http://jsfiddle.net/mnM5j/2/
#trigger {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
height: 10em;
background: yellow;
}
<div id="trigger">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>
这篇关于使用 flexbox 垂直居中项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！