Sign in to follow this  
capone888

[web] HTML and CSS - How do I get this to center horizontally?

Recommended Posts

Hey all,

I am trying to learn html / css so I can make some GUI screens for a text based rpg I am creating. I am fairly new to web development and I have a problem I am sure there is an easy fix to that I am overlooking. Could one of you please suggest a solution because it is driving me nuts.

Basically, I just want to have some buttons lined up horizontally along the top of a single column, fixed-width page (which is all centered). I got them to display, but they are left-aligned. I can also change them to right aligned. But what I want them to do is to line up centered horizontally. If I use the center tag it is centering them, but they are centered vertically.

Maybe I am not explaining it too well. Take a look at this screenshot to see what it looks like left-alighned, right-aligned, centered, and how I want it to actually look.

http://img263.imageshack.us/img263/7601/sshots.jpg

Here is my relevant code:

HTML code:

<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>





CSS code:

body {
text-align: center;
}

#container
{
margin: 0 auto;
width: 800px;
background:#fff;
}

#header
{
background:#ccc;
padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
float: left;
width: 800px;
background:#333;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left; //This is the value I was playing around with.
padding: 5px 10px;
color:#fff;
text-decoration: none;
border-right: 1px solid#fff;
}

#navigation li a:hover { background:#383; }





Thanks for any advice.

[Edited by - capone888 on December 3, 2010 6:59:28 PM]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this