CSS vertical alignment text inside li

Question

I am displaying number of  boxes in a row with fix height and width  generated from  lt li gt  tags  now I need to align the text in the  vertical center  The CSS vertical-align has no impact  maybe I am missing something     I am not looking for tricks using  margin  padding  line-height   these will not work because some text are long and will break into two lines   Please find the actual code   CSS code  ul catBlock    width 960px     height  270px     border 1px solid  ccc      ul catBlock li    list-style  none     float left     display block     text-align  center     width 160px     height  100px     ul catBlock li a     display  block      padding  30px 10px 5px 10px     height 60px      HTML code   lt ul class  catBlock  gt    lt li gt  lt a href     gt IP Phone lt  a gt  lt  li gt    lt li gt  lt a href     gt Dual SIM Switch Server lt  a gt  lt  li gt    lt li gt  lt a href     gt IP PBX lt  a gt  lt  li gt   lt  ul gt

User · Answer

As explained in here  https   css-tricks com centering-in-the-unknown       As tested in the real practice  the most reliable yet elegant solution is to insert an assistent inline element into the  lt li   gt  element as the 1st child  which height should be set to 100   of its parent   s height  the  lt li   gt    and its vertical-align set to middle  To achieve this  you can put a  lt span   gt   but the most convenient way is to use li after pseudo class    Screenshot    ul menu-horizontal       list-style-type  none      margin  0      padding  0      display  inline-block      vertical-align  middle     ul menu-horizontal after       content          clear  both      float  none      display  block     ul menu-horizontal li       padding  5px 10px      box-sizing  border-box      height  100       cursor  pointer      display  inline-block      vertical-align  middle      float  left        The magic happens here     ul menu-horizontal li before       content          display  inline      height  100       vertical-align  middle

User · Answer

However many years late this response may be  anyone coming across this might just want to try  li       display  flex      flex-direction  row      align-items  center      Browser support for flexbox is far better than it was when  scottjoudry posted his response above  but you may still want to consider prefixing or other options if you re trying to support much older browsers  caniuse  flex

User · Answer

Surprisingly  or not   the vertical-align tool actually works best for this job  Best of all  no Javascript is required   In the following example  I am positioning the outer class in the middle of the body  and the inner class in the middle of the outer class   Preview  http   jsfiddle net tLkSV 513   HTML    lt div id  container  gt       lt span gt  lt  span gt  lt div class  outer  gt           lt span gt  lt  span gt  lt div class  inner  gt            lt  div gt       lt  div gt   lt  div gt    CSS   html  body       height  100       margin  0      padding  0     container       text-align  center      height  100     span        height  100       vertical-align  middle      display  inline-block     outer       width  100px      height  200px      padding  0      border  1px solid  000      vertical-align  middle      display  inline-block     inner       background  red      width  30px      height  20px          vertical-align  middle      display  inline-block      Vertical align works by aligning the centers of elements that are next to each other  Applying vertical-align to a single element does absolutely nothing  If you add a second element that has no width but is the height of the container  your single element will move to vertically center with this no-width element  thus vertically centering it  The only requirements are that you set both elements to inline  or inline-block   and set their vertical-align attribute to vertical-align  middle   Note  You may notice in my code below that my  lt span gt  tag and  lt div gt  tag are touching  Because they are both inline elements  a space will actually add a space between the no-width element and your div  so be sure to leave it out

User · Answer

Simple solution for vertical align middle    for me it works like a charm   ul display table  text-align center  margin 0 auto   li display inline-block  text-align center   li items inside li display inline-block  vertical-align middle

User · Answer

In the future  this problem will be solved by flexbox  Right now the browser support is dismal  but it is supported in one form or another in all current browsers   Browser support  http   caniuse com flexbox   vertically aligned           older webkit        display  -webkit-box      -webkit-box-align  center      -webkit-justify-content  center          older firefox        display  -moz-box      -moz-box-align  center      -moz-box-pack  center          IE10       display  -ms-flexbox      -ms-flex-align  center      -ms-flex-pack  center          newer webkit        display  -webkit-flex      -webkit-align-items  center      -webkit-box-pack  center          Standard Form - IE 11   FF 22   Chrome 29   Opera 17         display  flex      align-items  center      justify-content  center      Background on Flexbox  http   css-tricks com snippets css a-guide-to-flexbox

User · Answer

Give this solution a try  Works best in most of the cases  you may have to use div instead of li for that   x000D   x000D   DivParent   x000D      height  100px  x000D      border  1px solid lime  x000D      white-space  nowrap  x000D    x000D   verticallyAlignedDiv   x000D      display  inline-block  x000D      vertical-align  middle  x000D      white-space  normal  x000D    x000D   DivHelper   x000D      display  inline-block  x000D      vertical-align  middle  x000D      height 100   x000D    x000D   lt div class  DivParent  gt  x000D       lt div class  verticallyAlignedDiv  gt  x000D           lt p gt Isnt it good  lt  p gt  x000D        x000D       lt  div gt  lt div class  DivHelper  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There are no perfect answers provided here except Asaf s answer which doesn t provide any code nor any example  so I would like to contribute mine     Inorder to make vertical-align  middle  work  you need to use display  table  for your ul element and display  table-cell  for li elements and than you can use vertical-align  middle  for li elements   You don t need to provide any explicit margins  paddings to make your text vertically middle   Demo  ul catBlock      display  table      width 960px       height  270px       border 1px solid  ccc      ul catBlock li       list-style  none      display  table-cell       text-align  center       width 160px       vertical-align  middle     ul catBlock li a        display  block

User · Answer

line-height is how you vertically align text  It is pretty standard and I don t consider it a  hack   Just add line-height  100px to your ul catBlock li and it will be fine   In this case you may have to add it to ul catBlock li a instead since all of the text inside the li is also inside of an a  I have seen some weird things happen when you do this  so try both and see which one works

User · Answer

Define the parent with display  table and the element itself with vertical-align  middle and display  table-cell

[html] CSS vertical alignment text inside li

Examples related to html

Examples related to css

Examples related to vertical-alignment