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

## Recommended Posts

capone888    122
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; }

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

leiavoia    960

##### Share on other sites
cagecrawler    240
This should center align the list, although I haven't tested it.

display: block;
margin: 0 auto;
}