Kevin Powell - Community•8mo ago

Centering and Resizing my <a> links

For my navigation bar, I want my links (with the white background) to be vertically centered and the text to be bigger. I've tried solving it with different display: types in my css, but nothing seems to work. HTML

      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="pages/about.html">About</a></li>
          <li><a href="pages/news.html">News</a></li>
          <li><a href="pages/ducklection.html">Ducklection</a></li>
          <li><a href="pages/ascension.html">Accened Duckies</a></li>
          <li><a href="pages/goose.html">Goose Lore</a></li>
        </ul>
      </nav>

      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="pages/about.html">About</a></li>
          <li><a href="pages/news.html">News</a></li>
          <li><a href="pages/ducklection.html">Ducklection</a></li>
          <li><a href="pages/ascension.html">Accened Duckies</a></li>
          <li><a href="pages/goose.html">Goose Lore</a></li>
        </ul>
      </nav>

CSS

nav {
  width: 100%; height: 20%;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

 nav ul {
  width: 80%; height: 80%;
  background: orangered; 
  margin: 0; padding: 0;   
  list-style-type: none; 
} 
nav li {
  height: 100%;
  background: orange;   
  display: inline-block;
}  
nav a {
  background: white;
  color: black;
  text-decoration: none;
}

nav {
  width: 100%; height: 20%;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

 nav ul {
  width: 80%; height: 80%;
  background: orangered; 
  margin: 0; padding: 0;   
  list-style-type: none; 
} 
nav li {
  height: 100%;
  background: orange;   
  display: inline-block;
}  
nav a {
  background: white;
  color: black;
  text-decoration: none;
}

20 Replies

b1mind•8mo ago

nav li {
  padding: 1rem;
  display: grid;
  place-items: center;
}

nav li {
  padding: 1rem;
  display: grid;
  place-items: center;
}

Fire_eyes•8mo ago

doing that causes the nav bat to do this

b1mind•8mo ago

Put it in a codepen please oh because you are not flexing your ul that is mb I was wondering why you had inline-block on the li's

nav ul {
  display: flex;
  flex-wrap: wrap;
...other stuff
}

nav ul {
  display: flex;
  flex-wrap: wrap;
...other stuff
}

by default grid elements will try to take up the available space and are block elements You could also use display: inline-grid; on the li's ig

Fire_eyes•8mo ago

I Made a code pen with the header in it: https://codepen.io/Fire_eyes2/pen/NWeyBPV?editors=1100

Fire

CodePen

Duck Emporium

...

Fire_eyes•8mo ago

do you have a solution to them being right next to each other? margin would add space on the top and bottom and specifing left or right would make it uncentered since the li is a grid I tried using column-gap and I didnt get a change

b1mind•8mo ago

like this?

b1mind•8mo ago

are you just using the bg colors to see whats what? cause that matters in how you go about this

Fire_eyes•8mo ago

The background colors are just so I can differ between each section they arent permanet

b1mind•8mo ago

nav ul {
  width: 100%;
  height: 80%;
  background: orangered;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0; padding: 0;   
  list-style-type: none; 
}

nav ul {
  width: 100%;
  height: 80%;
  background: orangered;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0; padding: 0;   
  list-style-type: none; 
}

you can just use this and no li styles

b1mind•8mo ago

or space-evenly might work better if you don't have padding on the header

Fire_eyes•8mo ago

Yeah this works! thankyou for the help! I appriciate it!! 💚

b1mind•8mo ago

NP! I would look at using Grid for layout too, please don't be using floats 😄 for layout* You probably noticed having to gives heights to stuff too and how they don't really behave how you would think generally a good mental model is to never declare a height (use mix/max) and let your content determine the height. Grid is really good at being "full" by default too

b1mind•8mo ago

i.e. https://codepen.io/b1mind/pen/zYydOja

Brent Morton

CodePen

understand why

...

b1mind•8mo ago

it will make its children "fill" by default where flex child is going to shrink to a "max-content" value.

Gaming

Programming

Centering and Resizing my <a> links