CSS: comment faire marge: travail 0px auto

Question

Je suis en train de centrer les images à l'intérieur d'un autre bloc:

Le code HTML ressemble à ceci:

<ul> 
    <li>  
    <a href="/article/japanese-culture-one/"> 
    <img src="/site_media/upload/fushimi-inari-fox_jpg_200x200_q85.jpg" 
    alt="Лисица Инари - один из мифических 
    персонажей культа синто"/> </a> <br /> 
    <a href="/article/japanese-culture-one/" 
    class="article_title">История и 
    культура Японии. Часть Первая</a> 
    <p>Изолированная от остального мира 
    Япония породила действительно 
    уникальную культуру, удивляющую 
    западного человека своей непохожестью 
    и вдохновляющую своей красотой. 
    История и культура Японии, живущей по 
    своим ...</p> </li> ..... 
</ul> 

Ce que je veux faire est de placer les image dans le centre de li. (Voir http://img.skitch.com/20091128-xf36n8ekhpxyi5rdgnuqrtw36a.png)

Le css regarde la façon suivante:

ul#related{ 
    list-style:none; 
    margin-top: 280px; 
} 

ul#related li{ 
    float:left; 
    width:30%; 
    height: 500px; 
    margin:5px; 
} 

ul#related li a img{ 
    border:1px solid #E3E3E3; 
    padding:2px; 
    height: 190px; 
    width: 190px; 
    text-align: center; 

} 

Code complet peut être consulté sur le site: http://j-in.org.ua/article/art/

Merci à l'avance!

Answer 1

Pour que margin: 0 auto fonctionne, les images doivent être des éléments de niveau bloc. Ajouter:

ul#related li a img { 
    display: block; 
    margin: 0 auto; 
} 

et les images apparaissent dans le centre comme vous voulez.

Answer 2

Dans mon cas similaire, je tente de centrer une span (avec 3 input s) dans un div:

<div id="featurePaginator"> 
    <span> 
     <input type="radio" name="featurePage"> 
     <input type="radio" name="featurePage"> 
     <input type="radio" name="featurePage"> 
    </span> 
</div> 

En utilisant Magnar's solution dans ce cas, autowidth remplit toute div du span. Pour le faire fonctionner (avec display: block;), il doit être réglé width pour le faire fonctionner. Mais je ne sais pas combien de input s auront là, alors je suis venu avec une meilleure solution, au moins mon cas, en utilisant display: table;:

#featurePaginator span { 
    margin: 0px auto; 
    display: table; 
} 

Les table s sont affichés en fonction aussi mince que son contenu Donc, en réglant display: table, j'ai pu atteindre le centrage que je cherchais.