Vertical Navbar, center text vertically?

Question

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>

Mr. Polywhirl · Answer 1 · 2021-02-16T19:59:14.450

0

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>

edited Feb 16 '21 at 19:59

answered Feb 16 '21 at 19:16

Mr. Polywhirl

42,981
12
84
132

Wow, thank you very much! But I don't want to center the lists all over the page only a little bit over the bottom. Can you tell me how to do this? – LightCode Feb 16 '21 at 19:25
@LightCode Can you post an example picture in your question? – Mr. Polywhirl Feb 16 '21 at 19:27
Done. I hope you can help me.. – LightCode Feb 16 '21 at 19:33
@LightCode I flexed the inner grid (ul) to size itself relative to its container. The list items should be vertically centered, but `0.5em` spaced-apart from one another. Click the "Full page" button (when viewing the snippet) to see the full-screen presentation. – Mr. Polywhirl Feb 16 '21 at 19:35
It doesn't work.. – LightCode Feb 16 '21 at 19:44
@LightCode please show a FULL page example of what your nav list SHOULD look like. Use paint if you have to, and upload it to your question. – Mr. Polywhirl Feb 16 '21 at 19:51
It is done, pls – LightCode Feb 16 '21 at 19:57
@LightCode Oh, you want the text to be left-justified? That is easy, I will update it. – Mr. Polywhirl Feb 16 '21 at 19:57
Yessss nice thank you very much! :D – LightCode Feb 16 '21 at 20:06

Vertical Navbar, center text vertically?

1 Answers1