title: How do i center li element in ul vertically? css
body: <p>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 want an explanation to the solution because I'm relatively new to css.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Default styling*/
  
   * {
       margin: 0;
       padding: 0;
   }
  
  
  
  /*Links section*/
  .links {
      background-color: coral;
      width:100%;
      height:40px;
  
  }
  
  .links ul {
  }
  
  .links li {
      margin: auto;
      display:inline-block;
      text-align:center;
      height:100%;
      padding: 0 20px;
       font-family:Arial, Helvetica, sans-serif;
  
  
  }
  .links li:hover {
      background-color: red;
      width:auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link href="./style.css" type="text/css" rel="stylesheet"&gt;
          &lt;title&gt;Beans testing AREA&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;ul class="links"&gt;
                  &lt;li&gt;
                      Home
                  &lt;/li&gt;
                  &lt;li&gt;
                      About
                  &lt;/li&gt;
                  &lt;li&gt;
                      Life
                  &lt;/li&gt;
              &lt;/ul&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>