Centering Menu Items Vertically

EDIT: Make your way towards the bottom. I did not want to start a whole new thread since it still deals with centering (but this time it is vertically). Thank you muchly!

I currently only have my website on my localhost, but I screen captured the length of the website so I could receive some feedback about the design of the front page, here.

I am not finished with the footer and I really do not like the way it looks currently. Any suggestions on that would be greatly appreciated. Also, I would like to center the menu bar, so I tried to do a simple text-align, but nothing came of it. Here is a CodePen of my menu bar to help you figure out whatever I need to do.

@Jarolin: This is going to be a portfolio website with sections for my various projects. The front page will be a blog, then you have a drop-down menu for _Graphic Novels & Written Novellas_ that has two options, _Feel Good Candy_ and _Gloom_. Each option sends you to a page that discusses that specific story. Then there is a forum for people to talk about anything related to art or my works. “Contact” should be fairly self-explanatory. So should “Store” and “Support.”

@jshjohnson: This is the Tumblr theme that inspired my current design, here. I like how bold everything is (and I mean “out there” rather than font-weight). I would like to stay fairly close to that design if possible. If I enlarge the white text to the point of my inspiration, then it may make it easier to read. Also, I opted for Droid Sans rather than Georgia. Was this a bad decision?

Thank you for your comments thus far!

Edit #1: And anyone who knows how to center menu items, feel free to share your wealth of knowledge.

Edit #2: Also, I just looked at the screen capture and it displays it much smaller than what the actual width of the website is (which is 960 pixels). So, that might be part of the problem. The body text is 16 px as well.

1. Usually when people visit a website that isn’t an article or aren’t looking for information, they might not want to read. So i would replace that long description with something allot shorter. Or you can keep it the same length but move that introduction to an “About Me” or whatever text goes there.

2. The footer of the website that includes the copyright,navigation,and social network is too big. I don’t think people would care much about the copyrighting and all. So try making that smaller so it doesn’t become a large part of the website.

3. You should replace that “Forum” with a “Blog”. usually websites that are personal and about yourself don’t have much to talk about.

But overall its a great looking website. Very nice design and font-color.

Thank you, @wolfcry911! I was having difficulty understanding @Eric‘s link and then I saw you had responded. Also, thanks @Jarolin. The text that was in the “Introduction” post was just lorem ipsum. I wanted to see what it looked like with a whole article in one post. And the forum is equally as pointless. I wanted to test out bbPress, so I created a forum on my localhost. bbPress still does not have as much customization as I would like, so that will go as well when I take everything over to the interwebs. I got rid of the entire footer and replaced it with a petite one liner stating a copyright (because there will be illustrations of mine on my site and I want people to know that those are technically mine), the RSS feed, and designer. Although, I will make a post about all of the wonderful people here on CSS-Tricks. I would be lost without you guys. Thanks again! Cheers!

I have one more question. Now that the menu items are centered, I would like to center “Feel Good Candy” and “Gloom” in line with the newly named “Literature.” I have created a CodePen so that you may see my current code: here. I apologize for the amount of CSS. I am usually pretty good at figuring out which line of code does what, but I know very little about how my own menu works. Thank you in advance!

Okay, the nudging to the left with a negative value works fine. The text-align, not so much. Here is a fork in CodePen: here. Also, I can see that the size of the menu is increasing. Is this because I have created a negative value for the left property? And if so, how do I diminish the menu box, as well, once it is positioned properly? Thank you for your help thus far, @jurotek.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.