Question

I need to vertically align in middle labels of menu. Allso if client will change the value of label and it will break in two lines, it’ll stays in middle. As i know vertical-align: middle works for table cells, but I need to generate menu from <li> elements. See example code below.

html

  <ul>
    <li><a href="#">qwe</a></li>
    <li><a href="#">asd</a></li>
    <li><a href="#">zxcvbnm asdfgh</a></li>
  </ul>

css

ul {
  list-style: none;
}
li {
  float:left;
  border: 1px solid;
  margin: 1px;
  height: 60px;
  width: 60px;
  background: tomato;
  text-align: center;
  vertical-align: middle;  
}
a {
  vertical-align: middle;
}

And working prototype at jsbin

Answer 1

Hi now give to li display:table-cell and remove float:left

as like this

    li {
     display:table-cell;
       vertical-align: middle;
float:left; // remove this line  
    }

Demo