I'm working with a div which has the following css attribute assigned to it: display: -webkit-box;.
This div of mine contains text which I'd like to align vertically to the middle. Is this possible without changing the display attribute given to the div?
Additional Info:
I'm using the latest version of Chrome and have tried vertical-align: middle; which failed.
There are two cases of -webkit-box-orient depending on it's value:
-webkit-box-orient: vertical: you shoud use -webkit-box-pack: center to vertical align the text.
-webkit-box-orient: horizontal: you shoud use -webkit-box-align: center to vertical align the text.
All of these cases are similar to the alignment in flexBox.
The following statement works for me:
-webkit-box-align: center;
https://jsfiddle.net/awt39v5s/1/
For the "old" flexbox definition, https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/ is a good resource.
The children should be display block. And use in parent element:
-webkit-box-orient: horizontal;
-webkit-box-align: end;