title: Trying to create a vertical nav bar which has the items inside centred vertically
body: <p><a href="https://i.stack.imgur.com/JqJWk.png" rel="nofollow noreferrer">This is what I am trying to achieve.</a></p>
  <p>I am trying to build this vertical navigation bar using HTML &amp; CSS in my Blazor application, and want to build the image shown.</p>
  <p>HTML:</p>
  <pre><code>&lt;ul&gt;
  &lt;li class=&quot;nav-item&quot; @onclick=&quot;OnTags&quot;&gt;
      &lt;img src=&quot;/images/imageOne.png&quot;/&gt;
      &lt;span aria-hidden=&quot;true&quot;&gt;Tags&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot; @onclick=&quot;OnTags&quot;&gt;
      &lt;img src=&quot;/images/imageTwo.png&quot;/&gt;
      &lt;span aria-hidden=&quot;true&quot;&gt;Dashboard&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  <pre><code> ul {
      list-style-type: none;
      padding: 10px;
      width: 150px;
  }
  span {
      display: block;
      font-family: Bahnschrift Light;
      text-transform: uppercase;
  }
  
  li {
      display: block;
      width: 145px;
      border: 2px white;
  }
  
  .nav-item {
      font-size: 0.9rem;
      padding-bottom: 0.5rem;
      color: white;
      cursor: pointer;
      padding-top: 1em;
      padding-bottom: 1em;
  }
  </code></pre>