Jump to content

centering a <div>


Recommended Posts

Probably a simple question. I'm trying to center the contents of a <div>. "Margin:auto" didn't work even when "position:absolute" was added.I've taken the Stu Nicholls menu and want to center it on the page. I enclosed his <div> tags in one of my own to center his. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title> Stu Nicholls | CSSplay | Professional drop-line</title><link rel="stylesheet" media="all" type="text/css" href="pro_dropline.css" /><!--[if IE]><link rel="stylesheet" media="all" type="text/css" href="pro_dropline_ie.css" /><![endif]--></head><body><div style="margin: auto; position: absolute;">  <div class="nav">    <div class="table">      <ul class="select">        <li>          <a href="#nogo"><b>Home</b></a>        </li>      </ul>      <ul class="select">        <li>          <a href="#nogo"><b>Food Stamp</b>          <!--[if IE 7]><!--></a><!--<![endif]-->          <!--[if lte IE 6]>            <table><tr><td><![endif]-->          <div class="select_sub">            <ul class="sub">              <li><a href="#nogo">Production</a></li>              <li><a href="#nogo">Jichuan</a></li>              <li><a href="#nogo">Jerry	</a></li>            </ul>          </div>          <!--[if lte IE 6]>            </td></tr></table></a><![endif]-->        </li>      </ul>      <ul class="current">        <li>          <a href="#nogo"><b>Food Stamp Rad</b>          <!--[if IE 7]><!--></a><!--<![endif]-->          <!--[if lte IE 6]><table><tr><td><![endif]-->          <div class="select_sub show">            <ul class="sub">              <li><a href="#nogo">Yin</a></li>              <li><a href="#nogo">Davidson</a></li>              <li><a href="#nogo">Malvern Hall</a></li>              <li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>              <li><a href="#nogo">Weymouth Bay</a></li>            </ul>          </div>          <!--[if lte IE 6]>            </td></tr></table></a><![endif]-->        </li>      </ul>      <ul class="select">        <li>          <a href="#nogo"><b>Henri Matisse</b>          <!--[if IE 7]><!--></a><!--<![endif]-->          <!--[if lte IE 6]><table><tr><td><![endif]-->          <div class="select_sub">            <ul class="sub">              <li><a href="#nogo">The Girl with Green Eyes</a></li>              <li><a href="#nogo">The Dream</a></li>              <li><a href="#nogo">Woman in Blue</a></li>              <li><a href="#nogo">The Yellow Dress</a></li>              <li><a href="#nogo">The Piano Lesson</a></li>            </ul>          </div>          <!--[if lte IE 6]>            </td></tr></table></a><![endif]-->        </li>      </ul>      <ul class="select">        <li>          <a href="#nogo"><b>Paul Cezanne</b>          <!--[if IE 7]><!--></a><!--<![endif]-->          <!--[if lte IE 6]><table><tr><td><![endif]-->          <div class="select_sub">            <ul class="sub">              <li><a href="#nogo">The Large Bathers</a></li>              <li><a href="#nogo">Onions and Bottles</a></li>              <li><a href="#nogo">Mardi Gras</a></li>              <li><a href="#nogo">Still Life</a></li>              <li><a href="#nogo">Boy in a Red Waistcoat</a></li>            </ul>          </div>          <!--[if lte IE 6]>            </td></tr></table></a><![endif]-->        </li>      </ul>    </div>  </div></div><br /><br /><br /><p>Content goes here</p><p>© Copyright 2007 Stu Nicholls (cssplay.co.uk)</p></body></html>

I put my changes in the tag itself simply to make changing it easier and not screw around with Stu stuff. Once it is working, I'll have my own css file to put it in.Here is Stu's css:

/* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)htmlis available at [url="http://www.cssplay.co.uk/menus/pro_dropline.html"]http://www.cssplay.co.uk/menus/pro_dropline.html[/url]Copyright © 2005-2007 Stu Nicholls. All rights reserved.This stylesheet and the associated (x)html may be modified in any way to fit your requirements.=================================================================== */.nav {height:35px; background: url(pro_line_0.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:750px; z-index:500;}.nav .table {display:table; margin:0 auto;}.nav .select,.nav .current {margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap;}.nav li {margin:0; padding:0; height:auto; float:left;}.nav .select a {display:block; height:35px; float:left; background: url(pro_line_0.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#ddd;}.nav .current a {display:block; height:35px; float:left; background: url(pro_line_2.gif); padding:0 0 0 15px; text-decoration:none; line-height:35px; white-space:nowrap; color:#fff;}.nav .current a b {display:block; padding:0 30px 0 15px; background:url(pro_line_2.gif) right top;}.nav .select a:hover, .nav .select li:hover a {background: url(pro_line_1.gif); padding:0 0 0 15px; cursor:pointer; color:#fff;}.nav .select a:hover b, .nav .select li:hover a b {display:block; float:left; padding:0 30px 0 15px; background:url(pro_line_1.gif) right top; cursor:pointer;}.nav .select_sub {display:none;}/* IE6 only */.nav table {border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0;}.nav .sub {display:table; margin:0 auto; padding:0; list-style:none;}.nav .sub_active .current_sub a, .nav .sub_active a:hover {background:transparent; color:#f00;}.nav .select :hover .select_sub, .nav .current .show {display:block; position:absolute; width:750px; top:35px; background:url(back_0.gif); padding:0; z-index:100; left:0; text-align:center;}.nav .current .show {z-index:10;}.nav .select :hover .sub li a, .nav .current .show .sub li a {display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#444;}.nav .current .sub li.sub_show a {color:#088; cursor:default; background:url(menus/back_1.gif);}.nav .select :hover .sub li a:hover, .nav .current .sub li a:hover {visibility:visible; color:#088; background:url(menus/back_1.gif);}

Link to comment
Share on other sites

Centering a div is like this:

<div style="text-align: center"> <!-- Parent container -->   <div style="margin: 0 auto;">   Some content.   </div></div>

This shouldn't fail.

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...