Jump to content

Vertical align?


Recommended Posts

Hello again :)


I have started another attempt at designing my homepage (i have 2 ideas going, one with Joomla and one hand coded), and i have hit an issue with my navbar...


http://dhdesign.net63.net/ - I would like the text to be centered in the middle of the navbar, however all of the techniques i have tried aren't working (margin-top, vertical-align, padding), as they move the background color with them.


Is there any way i can keep the background color in the same place, whilst moving the text down?


Thanks a lot,



Oh, and i apologize if the code is a bit odd around the area of the navbar on the link, it is the result of following 2 or 3 google tutorials i found that didn't work.

Link to comment
Share on other sites

By default, link elements display inline, meaning that they don't span all the way across the page, and they don't cause a line break between elements (like a div, for example). You can learn more about this here: http://www3.w3schools.com/cssref/pr_class_display.asp


Inline elements can't have margins or padding added to them, which I believe is your problem. If you change your navigation's <a> elements to use display:block, you can then add top padding to move the link down into the correct position. Also, remember to reduce the height equal to the top padding.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...