[CSS] Jak wypośrodkować zdjecie w divie?, Opcja margin : auto nie działa. Opcje

[ed3k]

Piszę galerię w AJAXie. Nie mogę ustawić centralnego zdjęcia (w divie id="fota"). Chciałbym aby było ono wyśrodkowane w tym divie. Opcja margin : auto nie działa. Macie jakieś pomysły?

[HTML] pobierz, plaintext 
<div id="fota_tlo">
    <div id="fota_tloInside">
        <div id="fota">
            <img class="theOne" src="images/ZdjeciaPlacowki/{$arrGaleria[$obraz]}" onclick="exit();" title="Zamknij." />
        </div>
        <div id="previous_pudelkoIkona">
            <img src="images/ZdjeciaPlacowki/{$arrGaleria[$obraz-1]}" onclick="pobierzFoto('{$arrGaleria[$obraz-1]}');" class="icon" title="Poprzednie."/>
        </div>
        <div id="next_pudelkoIkona" align="right">
            <img src="images/ZdjeciaPlacowki/{$arrGaleria[$obraz+1]}" onclick="pobierzFoto('{$arrGaleria[$obraz+1]}');" class="icon" title="Kolejne."/>
        </div>
    </div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#fota_tlo {
    background : url('../images/tlo_galeria.png');
    width : 100%;
    height : 100%;
    position : fixed;
    top : 0;
    left : 0;
  }
 
 
#fota_tloInside {
    background : transparent;
    width : 40%;
    height : 100%;
    margin : 2% auto;
  }
 
 
#fota {
    background : transparent;
    outline : #000000 solid 0px;
    height : 75%;
    width : 100%;
  }
 
img.theOne {
    border : #000000 solid 5px;
    max-height : 100%;
    max-width : 100%;
  }
 
 
img.icon {
    margin : 10px;
    width : 150px;
  }
 
 
img.icon:hover {
    width : 170px;
    margin : auto 0px;
  }
 
 
#next_pudelkoIkona {
    float : left;
    width : 50%;
    background : transparent;
    position : relative;
    right : -50px;
  }
 
 
#previous_pudelkoIkona {
    float : left;
    width : 50%;
    background : transparent;
    position : relative;
    right : 50px;
  }
[HTML] pobierz, plaintext