我正在尝试用CSS' flexbox;而且,我知道如何使用非供应商前缀的代码,但即使有供应商前缀,我也无法让它在Webkit (Chrome)中工作。
我正在尝试垂直对齐#trigger中的span。
这是我的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;
}
你知道我做错了什么吗?
如果你知道我正在使用的属性的其他供应商前缀/版本,请随时分享它们,以便它可以在不仅仅是Webkit中工作。
align-items
属性适用于伸缩容器(应用了display: flex
的元素),而不是伸缩项目 (伸缩容器的子元素)。旧的2009年规格没有可与align-items
相媲美的属性;2009年的box-align
属性匹配到标准规范中的align-content
。
#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>
垂直对齐的布局可以通过以下属性实现,请注意这是使用旧语法,尽管我已经在最新版本的Chrome, Firefox &Firefox Aurora -
#trigger {
width: 200px;
height: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
}
#trigger span {
display: block;
}
box-orient
指定box的子框应该如何对齐,在我们的例子中是垂直对齐。
box-pack
将子元素沿box-orient轴对齐。
box-align
对齐盒内的孩子,它的轴垂直于盒的方向轴,也就是说,在我们的情况下,因为盒的方向是垂直的,它将决定孩子的水平对齐。
这是一个Codepen的演示,我在除了display: block
之外的span元素上应用的属性纯粹是为了美观。