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">
            <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>

enter image description here

19 thoughts on “Vertical Navbar, center text vertically?”

  1. 637371 356607Hiya! Great weblog! I happen to be a day-to-day visitor to your web site (somewhat far more like addict ) of this internet site. Just wanted to say I appreciate your blogs and am seeking forward for more! 285129


Leave a Comment