Vertical align text in block element

Question

I know vertical alignment is always asked about  but I don t seem to be able to find a solution for this particular example  I d like the text centered within the element  not the element centered itself   HTML    lt ul gt       lt li gt  lt a href    gt I would like this text centered vertically lt  a gt  lt  li gt   lt  ul gt    CSS   li a       width  300px      height  100px      margin  auto 0      display  block      background  red       x000D   x000D  li a   x000D      width  300px  x000D      height  100px  x000D      margin  auto 0  x000D      display  block  x000D      background  red  x000D    x000D   lt ul gt  x000D       lt li gt  lt a href    gt I would like this text centered vertically lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Is there really no CSS3 property for this  I d be willing to add a  lt span gt  in but I really don t want to add any more markup than that   Thanks

User · Accepted Answer

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

enter image description here

All you need to do is:

display: flex;
align-items: center;

See this fiddle.

User · Answer

You can try the display inline-block and  after Like this   HTML   lt ul gt       lt li gt  lt a href    gt I would like this text centered vertically lt  a gt  lt  li gt   lt  ul gt    CSS  li a       width  300px      height  100px      margin  auto 0      display  inline-block      vertical-align  middle      background  red      li a after     content       display  inline-block    width  1px solid transparent    height  100     vertical-align  middle      Please view the demo

User · Answer

You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally  Below an example of using those display properties to make a menu    x000D   x000D   menu   x000D    background-color  lightgrey  x000D    height  30px     calc 16px   12px   2     x000D    x000D   x000D   menu-container   x000D    margin  0px  x000D    padding  0px  x000D    padding-left  10px  x000D    padding-right  10px  x000D    height  100   x000D    x000D   x000D   menu-item   x000D    list-style-type  none  x000D    display  inline-table  x000D    height  100   x000D    x000D   x000D   menu-item a   x000D    display  table-cell  x000D    vertical-align  middle  x000D    padding-left  2px  x000D    padding-right  2px  x000D    text-decoration  none  x000D    color  initial  x000D    x000D   x000D   text-upper   x000D    text-transform  uppercase  x000D    x000D   x000D   text-bold   x000D    font-weight  bold  x000D    x000D   lt header gt  x000D     lt nav class  menu  gt  x000D       lt ul class  menu-container  gt  x000D         lt li class  menu-item text-upper text-bold  gt  lt a href  javascript    gt StackOverflow lt  a gt  lt  li gt  x000D         lt li class  menu-item  gt  lt a href  javascript    gt Getting started lt  a gt  lt  li gt  x000D         lt li class  menu-item  gt  lt a href  javascript    gt Tags lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  nav gt  x000D   lt  header gt  x000D   x000D   x000D    It works by setting display  inline-table  to all the  lt li gt   and then applying display  table-cell  and vertical-align  middle  to the children  lt a gt   This gives us the power of  lt table gt  tag without using it   This solution is useful if you do not know the height of your element   The compatibilty is very good  relative to caniuse com   with Internet Explorer    8

User · Answer

You can also try  a     height 100px    line-height 100px

User · Answer

Here s the general solution using just CSS  with two variations  The first centers vertically in the current line  the second centers within a block element    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Insert title here lt  title gt   lt  head gt   lt body gt       lt ul gt           lt li gt              line one          lt  li gt           lt li gt               lt span style  display  inline-block  vertical-align  middle  gt line two dot one                  lt br   gt                  line two dot two lt  span gt           lt  li gt           lt li gt              line three          lt  li gt       lt  ul gt       lt div style  height  200px  line-height  200px  border-style  solid   gt               lt span style  display  inline-block  vertical-align  middle  line-height  normal   gt line two dot one                  lt br   gt                  line two dot two lt  span gt       lt  div gt   lt  body gt   lt  html gt    As I understand it  vertical-align applies only to inline-block elements  e g    lt img gt   You have to change an element s display attribute to inline-block for it to work  In the example  the line height expands to fit the span  If you want to use a containing element  such as a  lt div gt   set the line-height attribute to be the same as the height  Warning  you will have to specify line-height  normal on the contained  lt span gt   or it will inherit from the containing element

User · Answer

Would using padding be OK for your needs    http   jsfiddle net sm8jy    li       background  red      text-align center    li a       padding  4em 0      display  block

User · Answer

DO NOT USE THE 4th solution from top if you are using ag-grid  It will fix the issue for aligning the element in middle but it might break the thing in ag-grid  for me i was not able to select checkbox after some row   Problem is not with the solution or ag-grid but somehow the combination is not good  DO NOT USE THIS SOLUTION FOR AG-GRID li a       width  300px      height  100px      margin  auto 0      display  inline-block      vertical-align  middle      background  red       li a after       content  quot  quot       display  inline-block      width  1px solid transparent      height  100       vertical-align  middle

User · Answer

li a   width  300px  height  100px  display  table-cell  vertical-align  middle  margin  auto 0  background  red

User · Answer

with thanks to Vlad s answer for inspiration  tested  amp  working on IE11  FF49  Opera40  Chrome53  li  gt  a     height  100px    width  300px    display  table-cell    text-align  center     H align      vertical-align  middle      centers in all directions nicely even with text wrapping  line breaks  images  etc   I got fancy and made a snippet  x000D   x000D  li  gt  a   x000D    height  100px  x000D    width  300px  x000D    display  table-cell  x000D      H align   x000D    text-align  center  x000D      V align   x000D    vertical-align  middle  x000D    x000D  a thin   x000D    width  40px  x000D    x000D  a break   x000D      force text wrap  otherwise  width  is treated as  min-width  when encountering a long word   x000D    word-break  break-all  x000D    x000D    more css so you can see this easier   x000D   x000D  li   x000D    display  inline-block  x000D    x000D  li  gt  a   x000D    padding  10px  x000D    margin  30px  x000D    background  aliceblue  x000D    x000D  li  gt  a hover   x000D    padding  10px  x000D    margin  30px  x000D    background  aqua  x000D    x000D   lt li gt  lt a href    gt My menu item lt  a gt  x000D   lt  li gt  x000D   lt li gt  lt a href    gt My menu  lt br gt  break item lt  a gt  x000D   lt  li gt  x000D   lt li gt  lt a href    gt My menu item that is really long and unweildly lt  a gt  x000D   lt  li gt  x000D   lt li gt  lt a href    class  thin  gt Good lt br gt Menu lt br gt Item lt  a gt  x000D   lt  li gt  x000D   lt li gt  lt a href    class  thin  gt Fantastically Menu Item lt  a gt  x000D   lt  li gt  x000D   lt li gt  lt a href    class  thin break  gt Fantastically Menu Item lt  a gt  x000D   lt  li gt  x000D   lt br gt  x000D  note  if using  break-all  need to also use   amp lt br gt   or suffer the consequences x000D   x000D   x000D

[html] Vertical align text in block element

Examples related to html

Examples related to css