Vertical Navbar, center text vertically?

I have coded a vertical navbar and I want to center the lists vertically, but somehow it doesn’t work and I don’t want to use the line-height property, because it changes the margin too. I’d really appreciate some help. Here’s the code:

   * {
            padding: 0px;
            margin: 0px;
        }

        .navbar {
            position: absolute;
            height: 100%;
            width: 10%;
            background-color: aquamarine;
            transition: 0.5s ease-in;
        }

        .navbar:hover {
            width: 90%;
        }

        .navbar:hover li{
           width: 100%;
           opacity: 1;
       }

        li {
            text-align: center;
            transition: 0.5s ease-in;
            opacity: 0;
            margin: 10px;
            vertical-align: middle;
        }

        a {
            text-decoration: none;
            color: black;
            font-size: 20px;
        }
  <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

enter image description here

1 thought on “Vertical Navbar, center text vertically?”

  1. You could display the <ul> (unordered list) as a grid. You never designated style overrides for the <ul> element that exists within your .navbar container.

    * {
      padding: 0px;
      margin: 0px;
    }
    
    .navbar {
      display: flex; /* Allow inner grid to size itself */
      justify-content: center; /* Horizontal alignment */
      align-items: center; /* Vertical alignment */
      position: absolute;
      top: 0; /* Make sure it is flush to the top */
      left: 0; /* Make sure it is flush to the left */
      height: 100%;
      width: 10%;
      background-color: aquamarine;
      transition: 0.5s ease-in;
    }
    
    .navbar:hover {
      width: 90%;
    }
    
    .navbar:hover li {
      opacity: 1;
    }
    
    .navbar > ul {
      list-style-type: none; /* Disable default list bullets */
      display: grid; /* Display the items in a grid format */
      grid-auto-flow: row; /* Display children as rows */
      grid-row-gap: 0.5em; /* Spacing between rows */
    }
    
    .navbar > ul li {
      margin: 0; /* Remove default margin */
      padding: 0; /* Remove default padding */
      text-align: left; /* Align text to the left */
      transition: 0.5s ease-in;
      opacity: 0;
    }
    
    a {
      text-decoration: none;
      color: black;
      font-size: 20px;
    }
    
    a:hover {
      text-decoration: underline; /* Change up the presentation a bit... */
    }
    <div class="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    Reply

Leave a Comment