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.