[CSS] Center content

[leway21]

I'm trying to get the navigation bar on www.todayms.com/TodayMS/home.php to center the text. Any help would be great.


html

<div id="container">
	<div class="nav_left"></div>
	<div class="nav_holder">
		<ul id="navigation">
			<li><a href="home.php">HOME</a></li>
			<li><a href="reg.php">Register</a></li>
			<li><a href="donations.php">DONATIONS</a></li>
			<li><a href="ranks.php">RANKINGS</a></li>
			<li><a href="http://teamr3.net/forum/index.php">FORUMS</a></li>
			<li><a href="downloads.php">DOWNLOADS</a></li>
			<li><a href="community.php">User Cp</a></li>
			<li><a href="login.php">Login</a></li>
			<li><a href="logout.php">Logout</a></li>
		</ul>
	</div>

css

div#container
{
	width: 964px;
	margin: 0 auto;
	background: #fff;
	overflow: auto;

}

 

[EliteGM]

text-align: center;

 

[Daevius]

The DIV in which the container is located should occupy the full length of the bar.

Also, then it should be simply:

div#container
{
	width: 964px;
	margin: 0 auto;
}

However, the width must be smaller then the bar in total, else there is nothing to centre.

 

[leway21]

text-align: center;

Tried that and had no luck. I added that again.

The DIV in which the container is located should occupy the full length of the bar.

Also, then it should be simply:

div#container
{
	width: 964px;
	margin: 0 auto;
}

However, the width must be smaller then the bar in total, else there is nothing to centre.

Tried and now it looks kinda messed up.

 

[leway21]

The DIV in which the container is located should occupy the full length of the bar.

Also, then it should be simply:

div#container
{
	width: 964px;
	margin: 0 auto;
}

However, the width must be smaller then the bar in total, else there is nothing to centre.

Ohh, I understand Its centering the 964px.. How would I go about centering the text in the div? I'm guessing thats not in css.

It seems like text-align: center; should do it I wonder why thats not working.


I was looking at the wrong css

/* --- Do NOT remove this copyright! --- /*

	NRacers2 ClanTemplate Developed for ClanTemplates.com - Cascading Style Sheet
	------------------------------------------------------------------------------------------------
	Designed by:	Maurits den Held - www.subleme.net
	Coded by:	Lee Tomblin - http: //www.strictcoding.net

	Table of Contents:
		import navigation - see nav.css for the actual css
*/

/* navigation
----------------------------------------------- */

.nav_left
{
	width: 3px;
	height: 45px;
	background: url(imgs/nav_left.gif) no-repeat;
	float: left;
}
.nav_holder
{
	width: 958px;
	height: 45px;
	background: url(imgs/nav_bg.gif) repeat-x;
	float: left;
}
.nav_right
{
	width: 3px;
	height: 45px;
	background: url(imgs/nav_right.gif) no-repeat;
	float: right;
	margin: 0 0 4px 0;
}
#navigation
{
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	list-style: none;
	margin: 0; padding: 0;
}
#navigation li
{
	float: left;
}
#navigation li a
{
	color: #fff;
	line-height: 45px;
	padding: 0 20px 0 20px;
	display: block;
	text-align: center;
}
	#navigation li a:hover
	{
		background: url(imgs/nav_bg.gif) repeat-x 0 -45px;
		color: #fff;
		text-decoration: none;
	}

 

[Daevius]

To centre a DIV, you need first one DIV as a container, which indicates the total width of the container, then inside you can have DIVs with a certain width smaller then its container (DIVs automatically have 100% width if you set no width).

The inside DIVs should have margin: 0 auto; or margin: auto 0; never remember which one it is, lol.

 

[billiejoe]

make a new frame(container that will hold your navigation button then put an ID for that class as #Frame.

#frame
{
width:800px;
margin-right:auto;
margin-left:auto;
}