[SOLVED]Centering text inside button boxes ?

[Source]

http://codepen.io/Sourceone/pen/rfbhq

I just started playing around with some basic hover states for the buttons , but im having difficulty with two things:

1. How do i make the text align vertically and horizontally inside each box ?

2. When i try to move the entire selection of boxes it continually uses the last button “Kontakt” as a pivot point to stretch the entire thing. this is when i use margin, padding and the other things i would normally try . Do i need to reset some part of the css ?

Thanks

Source

[Paulie_D]

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

[Source]

Saving the day again Paulie_D

Thanks

[Author]

Posts