CODEWITHSUNDEEP
cssflexbox
IMUXIxD
IMUXIxD

Reputation: 1227

Vertically center items with flexbox

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.

Upvotes: 24

Views: 63485

Answers (2)

cimmanon
cimmanon

Reputation: 68319

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>

Upvotes: 43

Vishu
Vishu

Reputation: 837

A vertically aligned layout can be achieved with following properties, please note that this is using the old syntax, though I've tested on latest builds of 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 specifies how the box's children should be aligned, which in our case is vertical.

box-pack aligns the children along the box-orient axis.

box-align aligns the children inside the box, it's axis is perpendicular to the box-orient axis, i.e. in our case since the box-orientation is vertical, it'll decide the alignment of the children horizontally.

Here's a Codepen demonstration, the properties I've applied on span elements other than display: block are purely for cosmetic purposes.

Upvotes: 9

Related Questions