• Advertisement
Sign in to follow this  

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

This topic is 2635 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