Input und label horizontal zentrieren

[hawkmaster]

Hallo zusammen,
Ich habe auf einer Intranet Seite eine Navigation mit einer Liste gemacht.

<ul id ="MainNavigation1">
  <li>
    <input name="image_job" id="image_job" type="image" title="Job" src="../image/job.gif" alt="job"  />
    <label for="image_job">Job</label>
  </li>
  <li>
<input name="image_document" id="image_document" type="image"  src="../image/document.gif"  alt="documentjob" title="Dokument"  />
<label for="image_document">Dokument</label>
  </li>
  <li>
<input name="image_project" id="image_project" type="image"  src="../image/partitialjob.gif"  alt="partitialj title="Projekt"  />
 <label for="image_project">Projekt</label>
  </li>
  <li>
<input name="image_photo" id="image_photo" type="image"  src="../image/hard.gif"  alt="hardcopyjob" title="Foto"  />
 <label for="image_photo">Foto</label>
  </li>
  <li>
    <input name="image_remove" id="image_remove" type="image"  alt="remove" src="../image/remove.gif"  title="Entfernen" />
  <label for="image_remove">Entfernen</label>
  </li>
</ul>

Die CSS dazu:
#MainNavigation1{
padding: 0;
margin: 0;
text-align:center;
}
#MainNavigation1 li{
 float:left;
 padding: 0;
 margin: 0;
 list-style: none;
}
#MainNavigation1 label{
margin: 2px;
}
#MainNavigation1 input{
  margin: 6px;
  display:block;
  width:auto;
}

Jetzt ist es so das sowohl das Bild des Input als auch der Text von Label immer linksbündig ist.
Schöner wäre es, wenn alles horizontal zentriert ist. Also das Bild mittig zum Text darunter ist.
Man sollte ja nicht mehr "align=center" verwenden.
Mit CSS komme ich aber nicht so recht weiter.
Versucht habe ich noch mit zusätzlichem DIV.
z.b.
<li>
<div>
<input name="image_job" id="image_job" type="image" title="Job" src="../image/job.gif" alt="job"  />
<label for="image_job">Job</label>
</div>
</li>

und dann in der CSS:
#MainNavigation1 li div{
text-align:center;
}

Aber das wirkt sich dann ja nicht auf das Input und Label aus.

Hat jemand sonst eine Idee?

vielen Dank und viele Grüße
hawk

[bulli]

Hallo,

Setz den div "MainNavigation1" in einen anderen div und weise dem anderen div dann text-align:center; zu.

Gruß
bulli

<div id="container">
   <div id="MainNavigation1">
    ....
   </div>
</div>

[hawkmaster]

Hallo bulli,
danke für deine Hilfe.

Setz den div "MainNavigation1" in einen anderen div und weise dem anderen div dann text-align:center; zu.

das ist das gleicher Ergebnis wie ich es auch schon versucht hatte.
Es wirkt sich nur auf "normalen" Text aus.
Nicht aber auf die Inputs und auch nicht auf die Labels.

Gruss
hawk