How Do I Center Li Element In Ul Vertically? Css

I would want to centre the li element in ul vertically. I've tried using text-align:center but it didn't work. I've been searching for a solution but it doesn't work. I'd also wan

Solution 1:

Add a line-height and vertical-align to the list items.

/*Default styling*/
* {
  margin: 0;
  padding: 0;
}


/*Links section*/
.links {
  background-color: coral;
  width: 100%;
  height: 40px;
}
.links li {
  margin: auto;
  display: inline-block;
  text-align: center;
  padding: 0 20px;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  line-height: 40px;
  vertical-align: center;
}

.links li:hover {
  background-color: red;
  width: auto;
}

<ul class="links">
  <li>Home</li>
  <li>About</li>
  <li>Life</li>
</ul>