[RESOLVED] CSS - Centering a div? (Resolved)

[Nightwalker83]

Hi,

How would I center the links and pictures on the left hand-side of the page (see attachment)?

I have tried using:

<div style = "text-align:center;">

</div>

But that does not work!

The code I have for the nav bar:

<div class="navigation">
	  <br /><center><img src="../images/berry01_red.gif" width="22" height="20" align="middle" alt="A Red Berry" /></center>
      <br /><center>Home</center>
      <br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
      <br /><center><a href="../html/produce.html" title = "Joe's Produce">Produce</a></center>
      <br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
      <br /><center><a href="../html/history.html" title = "Joe's History">History</a></center>
      <br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
      <br /><center><a href="../html/contact_us.html" target="_blank" title = "Contact Joe's">Contact Us</a></center>
      <br />
      <br />
      <br />
        <center><img src="../images/valid_xhtml10.gif" width="90" height="40" alt="Xhtml 1.0 Logo" /></center>
</div>

The code in the css file:

body {
     background-color:  #66FFCC;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 12pt;
     }
p  {
     color:  #006400;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 12pt;
     }
ul {
     color:  #006400;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 12pt;
     } 
table {
     color:  #006400;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 12pt;
     } 
p.first:first-letter {font-size: 14pt; font-style: italic;}
p.second:first-letter {font-size: 14pt; font-style: italic;}
p.third:first-letter {font-size: 14pt; font-style: italic;}
p.fourth:first-letter {font-size: 14pt; font-style: italic;}
p.fifth:first-letter {font-size: 14pt; font-style: italic;}
p.sixth:first-letter {font-size: 14pt; font-style: italic;}
   a:link {color: #006400;}
   a:visited {color: #32CD32;}
   a:hover {color: #FFFFFF; background: #006400; text-decoration: none;}   
  a:active {color: #FF0066; background: #006400; text-decoration: none;}
h2 {text-align: center; color:#006400; font-size: 12pt}

.container
{
width: 1024px;
}

.banner
{
height:42px;
}

.navigation
{

float: left;
width: 5px;
}

.main
{

Margin-left: 90px;
}

float: left; is the only way I know of to place the nav bar to the side like that. However, I can not center the text nor images.

Thank you,

Aaron

Edit: I am only trying to center the contents of the div not the whole div.

[Nightwalker83]

It doesn't matter I solved the problem.

I solved it by:

replacing all the class divs with id divs:

<div id="navigation"> 

instead of 

<div class="navigation">

In the "css" I put:

#navigation
{
float: left;
text-align: center;
width: auto;
}

#main
{
margin-left: 130px;
}

I found the solution of this site.