6

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.

Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
  • 2
    -webkit-box is a old and limited spec for flex. https://css-tricks.com/using-flexbox/ Vertical alignment will work for a limited set of browsers. – Gerard Nov 05 '18 at 09:20
  • https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers/49145277#49145277 – Varsha Dhadge Nov 05 '18 at 09:41
  • Which property? `display: -webkit-box'`? That's definitely a valid property. Look it up... It's usefull for multiline text ellipses wrapping... – Barry Michael Doyle Nov 06 '18 at 06:31

3 Answers3

8

There are two cases of -webkit-box-orient depending on it's value:

  1. -webkit-box-orient: vertical: you shoud use -webkit-box-pack: center to vertical align the text.

  2. -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.

Nonoroazoro
  • 310
  • 5
  • 7
3

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.

Johannes Reuter
  • 3,501
  • 19
  • 20
0

The children should be display block. And use in parent element:

-webkit-box-orient: horizontal;
        -webkit-box-align: end;
Leffa
  • 369
  • 4
  • 7