I’m trying to figure out the right CSS to center the text on the buttons.
It’d be cool to center all of it in relation to the main container as well, but that’s secondary.
Basically what I’m trying to do is line up the text centered over the buttons like this:
How would I go about that?
make your #main-nav width: 150px; then your text-align: center; will look correct.
dhechler, you rock. Thanks for your help as well Christopher.
Okay you’re gonna love me guys, now I need help vertically centering this text within the button. My client wants this to mirror the template to a T.
use padding. Also, your home link font visually looks smaller than the rest.
For vertical alignment, what you can do is take the height of the nav and apply that to the line-height as well.
For example, if you nav button was 50px tall, you would apply line-height: 50px;
Ah yes, the classic line-height equal to button height. Works every time.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".