Kevin Powell - Community•10mo 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•10mo ago

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

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

Fire_eyesOP•10mo ago

doing that causes the nav bat to do this

b1mind•10mo 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_eyesOP•10mo 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_eyesOP•10mo 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•10mo ago

like this?

b1mind•10mo ago

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

Fire_eyesOP•10mo ago

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

b1mind•10mo 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•10mo ago

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

Fire_eyesOP•10mo ago

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

b1mind•10mo 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•10mo ago

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

Brent Morton

CodePen

understand why

...

b1mind•10mo ago

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

Fire_eyesOP•10mo ago

Ill try using grid for the top half of my banner, I want confident in how to tackle it so I just had them floating right for now I want to make this a responsive website so ive been using alot of percents and im not quite sure its the bast practice for me to be doing lol. Ill definitely try to incorporate (max/min) more though for example my content section of the page is a flex with 3 boxes at 25%, 50%, and 25% respectively.

Fire_eyesOP•10mo ago

Its a massive step up from my first site created and theres alot to learn, but here is the full site so far: https://codepen.io/Fire_eyes2/pen/jOJeEOG?editors=1100

Fire

CodePen

Duck Emporium (Full)

...

b1mind•10mo ago

no you shouldn't really be using % I mean yes and no just #depends lol Again you should be letting your content determine size of the containers. "CSS defaults are responsive, its you that breaks it with custom CSS" - Kevin Also grid is really great for layout period like what your trying to do you can do with fr units or others in the grid templates

Fire_eyesOP•10mo ago

I gotcha Ill do some reaserch about that later tonight! Once again thank you lol I appreciate all the advice and help

Fire_eyesOP•10mo ago

I wanna plug this video here because it really helped me differ between flex and grid: https://www.youtube.com/watch?v=hT9ABJyOzwM

theteachr

YouTube

[css] Flex vs Grid

in*

Gaming

Programming

Centering and Resizing my <a> links