Flexbox alignment help. I can not get links in the header to center along the cross axis on a Flex-Row, left to right assignment

Issue

Doing The Odin Project course. On the flex box section and a little confused, in fact this is my ultimate biggest hurdle for a lot of stuff I am learning at the moment (so if you have a link to the issue I would love that so I could read and learn) but I am struggling to figure out what I am doing wrong with aligning along the cross axis in Flex, left to right.

So in the code, I need the "one two three" and "four five six" to be centered on the cross access.

I tried align-content/items, though I think I am suppose to be using items. I have tried center, flex-start / flex-end to see if it moves, it does not move on the cross at all.

I have googled quite a bit, trying for about an hour while I am working to try different things. Nothing seems to work. I was having trouble spacing them, however I was able to fix that and the margin to get them off the sides.

My assumption; I think I might be missing something about height? Does the container not have enough positive space to move around in? Is it so tight vertically that I AM centering but do not see it as the top and bottom are against the content / links as I took away padding and margin?

Please help, I know I can do this, I am just on some small hang ups, I just have 0 support around me as I am truly learning solo in all regards, I did not want to have to reach out for help but I need to.

.header {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  justify-content: center;
  align-content: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
  margin: 0em 3em 0em 3em;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Solution

Add height: 100%; to ul to make the centering you already have effective for the full height of its parent:

.header {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  justify-content: center;
  align-content: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
  margin: 0em 3em 0em 3em;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Answered By – Johannes

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.