Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [SOLVED]Centering text inside button boxes ? Reply To: Centering text inside button boxes ?

#150338
Paulie_D
Member

Buttons…there are no buttons in the Codepen…do you mean the menu links?

If so…the centering comes in two parts.

Horizontal Centering can be done using text-align:center.

Vertical Centering is acheieved by setting the line-height to the same height as the anchor link (in your case).

Your HTML is badly structured as your NAV is closed before the nav-inner div. You should fix that.

Also, using absolute positioning is not recommended by many developers except in certain circumstances for specific effects.

You should try floating the anchor links to the left (not right) so they are in source order. You may have to switch the order in the HTML to get the links correctly on the screen.

http://learnlayout.com/

Do i need to reset some part of the css ?

You should always use some form of re-set.

There is quite a lot more I could say but it would take a long time to go through.

Although there are other things that could be done (like using a proper menu etc)…I’ve given a the header a quick look over and made this…I hope it helps.

http://codepen.io/Paulie-D/pen/uKgrm