Trying to create a vertical nav bar which has the items inside centred vertically-CodePudding

This is what I am trying to achieve.

I am trying to build this vertical navigation bar using HTML & CSS in my Blazor application, and want to build the image shown.

HTML:

<ul>
<li  @onclick="OnTags">
    <img src="/images/imageOne.png"/>
    <span aria-hidden="true">Tags</span>
</li>
<li  @onclick="OnTags">
    <img src="/images/imageTwo.png"/>
    <span aria-hidden="true">Dashboard</span>
</li>

CSS:

 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;
}

CodePudding user response：

Use flex and it's easy, take a look at the snippet below

body { margin: 0 }
* { box-sizing: border-box }

ul {
  background-color: #666;
  height: 100vh;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  max-width: 10rem;
  min-width: 10rem;

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.nav-item {
  border: 2px solid white;
  color: white;
  cursor: pointer;
  font-family: Bahnschrift Light, serfif;
  font-size: 0.9rem;
  margin: 0.125rem 0;
  padding: 1rem;
  text-transform: uppercase;
  
  display: flex;
}
.nav-item > span {
  margin-left: 0.5rem;
}

<ul>
  <li  @onclick="OnTags">
      <img src="/images/imageOne.png"/>
      <span aria-hidden="true">Tags</span>
  </li>
  <li  @onclick="OnTags">
      <img src="/images/imageTwo.png"/>
      <span aria-hidden="true">Dashboard</span>
  </li>
</ul>