How to vertically align text inside a flexbox

Question

I would like to use flexbox to vertically align some content inside an  lt li gt  but not having great success   I ve checked online and many of the tutorials actually use a wrapper div which gets the align-items center from the flex settings on the parent  but I m wondering is it possible to cut out this additional element    I ve opted to use flexbox in this instance as the list item height will be a dynamic       x000D   x000D      x000D    padding  0  x000D    margin  0  x000D    x000D   x000D  html  x000D  body   x000D    height  100   x000D    x000D   x000D  ul   x000D    height  100   x000D    x000D   x000D  li   x000D    display  flex  x000D    justify-content  center  x000D    align-self  center  x000D    background  silver  x000D    width  100   x000D    height  20   x000D    x000D   lt ul gt  x000D     lt li gt This is the text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

x000D   x000D      x000D    padding  0  x000D    margin  0  x000D    x000D   x000D  html  x000D  body   x000D    height  100   x000D    x000D   x000D  ul   x000D    height  100   x000D    x000D   x000D  li   x000D   display  flex  x000D   justify-content  center  x000D   align-items  center  x000D   background  silver  x000D   width  100   x000D   height  20   x000D    x000D   lt ul gt  x000D     lt li gt This is the text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Set the display in li as flex and set align-items to center  li     display  flex        Align items vertically      align-items  center        Align items horizontally      justify-content  center      I  personally  would also target pseudo elements and use border-box  Universal selector   and pseudo elements        before     after     padding  0    margin  0    box-sizing  border-box

User · Answer

Instead of using align-self  center use align-items  center   There s no need to change flex-direction or use text-align   Here s your code  with one adjustment  to make it all work   ul     height  100      li     display  flex    justify-content  center       align-self  center      lt ---- REMOVE      align-items  center        lt ---- NEW         background  silver    width  100     height  20        The align-self property applies to flex items  Except your li is not a flex item because its parent  ndash  the ul  ndash  does not have display  flex or display  inline-flex applied   Therefore  the ul is not a flex container  the li is not a flex item  and align-self has no effect   The align-items property is similar to align-self  except it applies to flex containers   Since the li is a flex container  align-items can be used to vertically center the child elements    x000D   x000D      x000D    padding  0  x000D    margin  0  x000D    x000D  html  body   x000D    height  100   x000D    x000D  ul   x000D    height  100   x000D    x000D  li   x000D    display  flex  x000D    justify-content  center  x000D       align-self  center     x000D    align-items  center  x000D    background  silver  x000D    width  100   x000D    height  20   x000D    x000D   lt ul gt  x000D     lt li gt This is the text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    codepen demo    Technically  here s how align-items and align-self work     The align-items property  on the container  sets the default value of align-self  on the items   Therefore  align-items  center means all flex items will be set to align-self  center   But you can override this default by adjusting the align-self on individual items    For example  you may want equal height columns  so the container is set to align-items  stretch  However  one item must be pinned to the top  so it is set to align-self  flex-start   example    How is the text a flex item   Some people may be wondering how a run of text      lt li gt This is the text lt  li gt    is a child element of the li   The reason is that text that is not explicitly wrapped by an inline-level element is algorithmically wrapped by an inline box  This makes it an anonymous inline element and child of the parent   From the CSS spec      9 2 2 1 Anonymous inline   boxes      Any text that is directly contained inside a block container element   must be treated as an anonymous inline element    The flexbox specification provides for similar behavior      4  Flex Items      Each in-flow child of a flex container becomes a flex item  and each   contiguous run of text that is directly contained inside a flex   container is wrapped in an anonymous flex item    Hence  the text in the li is a flex item

User · Answer

x000D   x000D      x000D    padding  0  x000D    margin  0  x000D    x000D  html  body   x000D    height  100   x000D    x000D  ul   x000D    height  100   x000D    x000D  li   x000D    display  flex  x000D    justify-content  center  x000D    align-items center  x000D    background  silver  x000D    width  100   x000D    height  20   x000D    x000D   lt ul gt  x000D     lt li gt This is the text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Using display  flex you can control the vertical alignment of HTML elements    x000D   x000D   box   x000D    height  100px  x000D    display  flex  x000D    align-items  center     Vertical    x000D    justify-content  center     Horizontal    x000D    border 2px solid black  x000D    x000D   x000D   box div   x000D    width  100px  x000D    height  20px  x000D    border 1px solid  x000D    x000D   lt div class  box  gt  x000D     lt div gt Hello lt  div gt  x000D     lt p gt World lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The best move is to just nest a flexbox inside of a flexbox  All you have to do is give the child align-items  center  This will vertically align the text inside of its parent      Assuming a horizontally centered row of items for the parent but it doesn t have to be  parent     align-items  center    display  flex    justify-content  center      child     display  flex    align-items  center

User · Answer

RESULT    HTML   lt ul class  list  gt     lt li gt This is the text lt  li gt     lt li gt This is another text lt  li gt     lt li gt This is another another text lt  li gt   lt  ul gt      Use align-items instead of align-self and I also added flex-direction to column   CSS        padding  0    margin  0    box-sizing  border-box     html  body     height  100       list     display  flex    justify-content  center    flex-direction  column       lt --- I added this      align-items  center        lt --- Change here      height  100px    width  100     background  silver      list li       background  gold    height  20

User · Answer

The most voted answer is for solving this specific problem posted by OP  where the content  text  was being wrapped inside an inline-block element  Some cases may be about centering a normal element vertically inside a container  which also applied in my case  so for that all you need is    align-self  center

User · Answer

It s depend on your li height just call one more thing line height  x000D   x000D        padding  0    margin  0     html  body     height  100      ul     height  100      li     display  flex    justify-content  center    align-self  center    background  silver    width  100     height 50px line-height 50px    x000D   lt ul gt     lt li gt This is the text lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

You could change the ul and li displays to table and table-cell  Then  vertical-align would work for you   ul       height  20       width  100       display  table     li       display  table-cell      text-align  center      vertical-align  middle      background  silver      width  100        http   codepen io anon pen pckvK

[html] How to vertically align text inside a flexbox?

Examples related to html

Examples related to css

Examples related to flexbox