Vertically center items with flexbox

by

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>

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  3. Vertical Align Center in Bootstrap 4 [duplicate]
  4. Chrome / Safari not filling 100% height of flex parent
  5. Why is a flex item limited to parent size?
  6. What are the differences between flex-basis and width?
  7. Bootstrap align navbar items to the right
  8. Aligning grid items across the entire row/column (like flex items can)
  9. Make flex-grow expand items based on their original size
  10. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  11. How to make flexbox items the same size?
  12. How can I make Flexbox children 100% height of their parent?
  13. Scrolling a flexbox with overflowing content
  14. Usage of display property of flex box items
  15. How to align left last row/line in multiple line flexbox [duplicate]
  16. How to keep wrapped flex-items the same width as the elements on the previous row?
  17. What are the differences between flex-grow and width?
  18. Removing display:flex adds spaces around a link. Why?
  19. Padding-bottom/top in flexbox layout
  20. React native text going off my screen, refusing to wrap. What to do?
  21. Create a row of flexbox items with a max height defined by one child [duplicate]
  22. Prevent flex items from overflowing a container
  23. Why isn’t my justify-content property working?
  24. How can I create multi columns from a single unordered list?
  25. How to stretch children to fill cross-axis?
  26. Issue when centering vertically with flexbox when heights are unknown
  27. Do I not understand the flex-grow property?
  28. Row Wrap in flex-box not wrapping in Safari
  29. What exactly flex-basis property sets?
  30. First-child full-width in Flexbox

Leave a Comment