CODEWITHSUNDEEP
cssflexboxvertical-alignmentdisplaytext-align
MarkAA
MarkAA

Reputation: 79

align-items: center not working in flexbox

I am trying to vertically align the tex of a nav bar that is in display: flex;. I have used the following code yet the text is still aligned to the top of the nav container and won't move down to the center. Could you please help me understand what I have done wrong? I have tried moving align-items: center; to the nav{} and nav ul li{} in CSS but it doesn't change anything.

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav ul li {
  font-size: 3rem;
}
<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>

Upvotes: 3

Views: 9139

Answers (3)

Chloe
Chloe

Reputation: 1

Kind of basic but worth mentioning- my issue was that I had a default margin I had to override. So if you're using a component that's used elsewhere/are overriding styles be sure you're checking margins/padding because that might be it!

Upvotes: 0

Seth Warburton
Seth Warburton

Reputation: 2413

The items are vertically aligned, or at least they try to be, but you have set the font size so large that they break out of your fixed-height container. Possible solutions:

  1. Don't set the font-size.
  2. Don't fix the height of the parent element.

Upvotes: 2

doğukan
doğukan

Reputation: 27491

Just add height: 100% to nav ul 

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

nav ul li {
  font-size: 3rem;
}
<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>

Upvotes: 7

Related Questions