htmlcssvertical-alignmentcentering

How do I put a div in the center of the page vertically?

I'm new to html, and I'm setting up a little webpage for myself. I'm trying to make a simple page that is just a navbar of gifs as the buttons, that each lead to a new page. I've got the navbar, they can link to new pages, but I would like this navbar to be in the center of the screen.

I can kind of figure out a way to do this, and have read other answers on here as to how, but where I run into an issue is that I would like each button to be spaced evenly. When I attempt to center the buttons, they scrunch together, ignoring the space-evenly I have set.

I have tried several things to make this work to no avail, and I'm not quite sure why these didn't work either. My attempts include:

margin: auto;
This did nothing, no change occurred. I also tried margin: 0; and just for fun, margin: 0 auto; and neither worked.

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

This would either launch the navbar to the very top or very bottom of the page, or do nothing. I played with the values a bit, too, but there wasn't a change to these results.

display: flex;
align-items: center;
justify-content: center;

This would override the (seen below) justify-content: space-evenly and squish each button together, and also just... not work.

Here is a crude image i whipped up in mspaint to further explain what I'm going for:

So, I would like the div (written below) to be an evenly spaced horizontal navbar, and to be placed in the center of the page. Any ideas?

here's the basic code, without any of the solutions I've tried, for a better look at it.

.buttons {
  height: 40px;
  width: 100%;
}

.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

.buttons li {
  padding-top: 10px;
}
<div class="buttons">
  <ul>
    <li>
      <a href="#button"><img src="https://placehold.co/40x40?text=1"></a>
    </li>
    <li>
      <a href="#button2"><img src="https://placehold.co/40x40?text=2"></a>
    </li>
    <li>
      <a href "#button3"><img src="https://placehold.co/40x40?text=3"></a>
    </li>
    <li>
      <a href="#button4"><img src="https://placehold.co/40x40?text=4"></a>
    </li>
    <li>
      <a href="#button5"><img src="https://placehold.co/40x40?text=5"></a>
    </li>
    <li>
      <a href="#button6"><img src="https://placehold.co/40x40?text=6"></a>
    </li>
    <li>
      <a href="#button7"><img src="https://placehold.co/40x40?text=7"></a>
    </li>
    <li>
      <a href="#button8"><img src="https://placehold.co/40x40?text=8"></a>
    </li>
  </ul>
</div>

Solution

  • I had to wrap it in a container that I could give a height, and make sure the child UL was 100% wide, for the space evenly to work

    .buttons {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Center the .buttons  vertically */
}

.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  width: 100%; /* ul is the full width of parent container */
}

.buttons li {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the LI content */
}
    <div style="height: 300px; border: 1px solid black;">
  <div class="buttons">
    <ul>
      <li>
        <a href="#button"><img src="https://placehold.co/40x40?text=1"></a>
      </li>
      <li>
        <a href="#button2"><img src="https://placehold.co/40x40?text=2"></a>
      </li>
      <li>
        <a href "#button3"><img src="https://placehold.co/40x40?text=3"></a>
      </li>
      <li>
        <a href="#button4"><img src="https://placehold.co/40x40?text=4"></a>
      </li>
      <li>
        <a href="#button5"><img src="https://placehold.co/40x40?text=5"></a>
      </li>
      <li>
        <a href="#button6"><img src="https://placehold.co/40x40?text=6"></a>
      </li>
      <li>
        <a href="#button7"><img src="https://placehold.co/40x40?text=7"></a>
      </li>
      <li>
        <a href="#button8"><img src="https://placehold.co/40x40?text=8"></a>
      </li>
    </ul>
  </div>
</div>