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
CSS
![No description](https://cdn.answeroverflow.com/1205611468515581993/Screenshot_2024-02-09_at_3.11.28_PM.png)
![No description](https://cdn.answeroverflow.com/1205611468851118130/Screenshot_2024-02-09_at_3.25.54_PM.png)
![No description](https://cdn.answeroverflow.com/1205611469182341120/Screenshot_2024-02-09_at_3.11.38_PM.png)
20 Replies
doing that causes the nav bat to do this
![No description](https://cdn.answeroverflow.com/1205621515513499698/Screenshot_2024-02-09_at_4.08.35_PM.png)
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
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 igI Made a code pen with the header in it: https://codepen.io/Fire_eyes2/pen/NWeyBPV?editors=1100
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
like this?
![No description](https://cdn.answeroverflow.com/1205632030365450310/image.png)
are you just using the bg colors to see whats what?
cause that matters in how you go about this
The background colors are just so I can differ between each section they arent permanet
you can just use this and no
li
styles![No description](https://cdn.answeroverflow.com/1205633446085529670/image.png)
or space-evenly might work better if you don't have padding on the header
Yeah this works! thankyou for the help! I appriciate it!! 💚
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
it will make its children "fill" by default where flex child is going to shrink to a "max-content" value.