Sign in to follow this  

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

This topic is 2565 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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

This topic is 2565 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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