-1

I'm trying to create a navigation bar that contains a list of things. I want to vertically align this list in the navigation bar. How would I go about doing that?

.navbar {
    position: fixed;
    height: 100%;
    width: 240px;
    top: 0;
    left: 0;
    background: aqua;
    padding: 6px 14px;
    text-align: center;
    align-items: center;
}

.navbar ul {
    margin-top: 20px;
    height: 100%;
    border: 5px solid #000000;
    
}

.navbar ul li{
    position: relative;
    margin: 0 5px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    list-style: none;
}
Apple Pie
  • 9
  • 1
  • 7
  • Hi and Welcome to SO. please take the [tour] first. Then read [how to ask questions here](https://stackoverflow.com/help/how-to-ask). After that edit the question to meet the guidelines and provide a [repro] for debugging details which also includes HTML. CSS without the HTML markup is nearly always useless. – tacoshy Oct 14 '21 at 02:29

1 Answers1

-1

Use Flexbox!

.navbar {
  position: fixed;
  height: 100%;
  width: 240px;
  top: 0;
  left: 0;
  background: aqua;
  padding: 14px 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#listContainer {
  width: 100%;
  height: 100%;
  border: 5px solid #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: none;
  padding: none;
}
  <div class="navbar">
    <div id="listContainer">
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
  </div>
mstephen19
  • 1,733
  • 1
  • 5
  • 20
  • @tacoshy is that why it works?? Height percentage is based on the container the element is inside. It is technically definite. height: 50% of an element inside a 100px container would have a height of 50px assuming the container has no padding. – mstephen19 Oct 14 '21 at 02:41
  • lol he deleted his comment – mstephen19 Oct 14 '21 at 09:03