Jump to content
  • Advertisement
Sign in to follow this  
capone888

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

This topic is 2755 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
Advertisement
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!