why does line-height vertically align li's

Question

why does adding css to li line-height:15vw center the li text whereas vertical-align:middle doesn't do anything

div{
background-color:black
}
li{
display:inline-block;
color:white;
text-decoration:none;

}
ul{
height:15vw;
}

<div>
   <ul>
      <li>home</li>
      <li>reset</li>
   </ul>

</div>

Are you asking what the difference between `line-height` and `height` is? Or why setting `line-height` helps you vertically align content in the `li` and `vertical-align` doesn't work? There are so many duplicates to this question. This is very common. — adprocas, Apr 11 '18 at 16:32

score 1 · Accepted Answer · answered Apr 11 '18 at 16:33

The vertical-align property can be used in two contexts: A. To vertically align an inline element's box inside its containing line box. B. To vertically align the content of a cell in a table.

why does line-height vertically align li's

1 Answers1