CODEWITHSUNDEEP
navbar
Daniel
Daniel

Reputation: 3

How do I align the text in my navbar to the center (vertically)?

How do I align the nav-bar items the fit in the center of my navbar (to have equal space at the top and the bottom of the bar)?

https://codepen.io/danielanggggg/pen/LYjwOer

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
  box-shadow: 0 2px 0 black;
}

#navbar a {
  color: white;
  margin-right: 3rem;
  margin-top: 3rem;
  text-decoration: none;
}

Upvotes: 0

Views: 44

Answers (1)

eroironico
eroironico

Reputation: 1372

Just add the align-items and some other properties like that(commented what i added):

#navbar {
     position: fixed;
     top: 0px;
     width: 100%;
     display: flex;
/*+*/align-items: center;
     justify-content: center;
/*+*/gap: 2rem;
     font-size: 20px;
     background-color: grey;
/*+*/padding: 2rem 4rem;
     box-shadow: 0 2px 0 black;
}

#navbar a {
    /* Here i just removed the margins */
    color: white;
    text-decoration: none;
}

Upvotes: 1

Related Questions