How to vertically align li elements in ul

Question

I have a horizontal  lt ul gt  and I need to center each  lt li gt  in it vertically  My markup is below  Each  lt li gt  has a border  and I need the items as well as their contents to be in the middle vertically  Please help  I am new to CSS     lt  xml version  1 0  encoding  UTF-8      lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 1  EN   http   www w3 org TR xhtml11 DTD xhtml11 dtd    lt html xmlns  http   www w3 org 1999 xhtml    lt head       lt title  lt  title       lt style type  text css            toolbar li                       border  solid 1px black              display  block              float  left              height  100px              list-style-type  none              margin  10px              vertical-align  middle                     toolbar li button                       height  50px                 lt  style   lt  head   lt body       lt div class  toolbar            lt ul               lt li  lt a href     first item lt br                    first item lt br                    first item lt  a  lt  li               lt li  lt a href     second item lt  a  lt  li               lt li  lt a href     last item lt  a  lt  li               lt li class  button   lt a href     button lt br                    button lt  a  lt  li           lt  ul       lt  div   lt  body   lt  html

User · Answer

Here s a good one   Set line-height equal to whatever the height is  works like a charm   E g   li       height  30px      line-height  30px

User · Answer

I assume that since you re using an XML declaration  you re not worrying about IE or older browsers   So you can use display table-cell and display table-row like so    lt  xml version  1 0  encoding  UTF-8    gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 1  EN   http   www w3 org TR xhtml11 DTD xhtml11 dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt  lt  title gt       lt style type  text css  gt           toolbar ul               display table-row                     toolbar ul li                       display  table-cell              height  100px              list-style-type  none              margin  10px              vertical-align  middle                     toolbar ul li a               display table-cell              vertical-align  middle              height 100px              border  solid 1px black                     toolbar ul li button a               height 50px              border  solid 1px black                 lt  style gt   lt  head gt   lt body gt       lt div class  toolbar  gt           lt ul gt               lt li gt  lt a href     gt first item lt br   gt                  first item lt br   gt                  first item lt  a gt  lt  li gt               lt li gt  lt a href     gt second item lt  a gt  lt  li gt               lt li gt  lt a href     gt last item lt  a gt  lt  li gt               lt li class  button  gt  lt a href     gt button lt br   gt                  button lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

I had the same problem  Try this    lt nav gt       lt ul gt           lt li gt  lt a href     gt AnaSayfa lt  a gt  lt  li gt           lt li gt  lt a href     gt Hakkimizda lt  a gt  lt  li gt           lt li gt  lt a href     gt Iletisim lt  a gt  lt  li gt       lt  ul gt   lt  nav gt     charset  utf-8    nav       background-color   9900CC      height  80px      width  400px     ul       list-style  none      float  right      margin  0     li       float  left      width  100px      line-height  80px      vertical-align  middle      text-align  center      margin  0     nav li a       width  100px      text-decoration  none      color   FFFFFF

User · Answer

You can use flexbox for this   ul       display  flex      align-items  center      A detailed explanation of how to use flexbox can be found here

[css] How to vertically align <li> elements in <ul>?

Examples related to css