Build a Technical Documentation Page

HTML-CSS
1

Can I vertically align a list item to be in the middle? I’m making a navigation bar and I want the list items to be in the middle of the box vertically, I can use padding but it’s not precise…

nav
nav339×501 6.64 KB

2

Hi there,
It would be helpful if you post your code instead of screenshots.
Try using the align-items property to center the list items vertically.

3

I apologize…
This is my HTML code for the navigation bar:

<nav id="navbar">
      <h1>CSS Documentation</h1>
      <ul id="nav-list">
        <li>
          <a class="nav-link" href="#introdiction">Introdiction</a>
        </li>
        <li>
          <a class="nav-link" href="#css-html">CSS and HTML</a>
        </li>
        <li>
          <a class="nav-link" href="#css-syntax">CSS Syntax</a>
        </li>
        <li>
          <a class="nav-link" href="#selectors">Selectors</a>
        </li>
        <li>
          <a class="nav-link" href="#properties">Properties</a>
        </li>
        <li>
          <a class="nav-link" href="#references">References</a>
        </li>
      </ul>
    </nav>

And this is the CSS code:

 }
#navbar {
  position: fixed;
  width: 17vw;
  min-width: 250px;
  height: 100vh;
  border-right: 2px solid;
  text-align: center;
}

#nav-list {
  list-style-type: none;
  padding: 0;
  width: 100%;
}
#nav-list li {
  border-top: 2px solid;
  width: 100%;
  height: 50px;
}
#nav-list li a{
  font-size: 1.25rem;
  text-decoration: none;
  color: inherit;
}
4

No worries!
Did you try using align-items property for your list items?

5

Yes, I’ve tried and nothing happened… I’m pretty sure text-align only changes the horizontal alignment

6

align-items can be used to align vertically. Make sure you are using it with a display:flex; on the parent element.

Try that and if it doesn’t work, you can share your code so we understand the problem.