Jump to content
  • Advertisement
Sign in to follow this  

[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.


Here is my relevant code:

HTML code:

<div id="container">
<div id="header">
Site name
<div id="navigation">
<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>

CSS code:

body {
text-align: center;

margin: 0 auto;
width: 800px;

padding: 20px;

#header h1 { margin: 0; }

float: left;
width: 800px;

#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;
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
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!