CSS: Como fazer margem: 0px

Question

Estou tentando centralizar imagens dentro de outro bloco:

O código HTML se parece com o seguinte:

<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>

O que eu quero fazer é colocar a imagem no centro de Li. (Vejo http://img.skitch.com/20091128-xf36n8ekhpxyi5rdgnuqrtw36a.png)

O CSS parece desta maneira:

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;

}

O código completo pode ser acessado no site: http://j-in.org.ua/article/art/

Desde já, obrigado!

Answer 1

Para margin: 0 auto Para funcionar, as imagens precisam ser elementos de nível de bloqueio. Adicionar:

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

E as imagens aparecem no centro como você deseja.

Answer 2

No meu caso semelhante, eu estava tentando centralizar um span (com 3 inputs) dentro de um div:

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

Usando Solução de Magnar nesse caso, o span's auto width preenche o todo div. Para fazer funcionar (com display: block;), ele precisa ser definido width para fazer funcionar. Mas eu não sei quantos inputs terá lá, então eu vim com uma solução melhor, pelo menos no meu caso, usando display: table;:

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

o tables são exibidos para se encaixar tão finos quanto seu conteúdo, portanto, configurando display: table, Eu poderia alcançar a centralização que estava procurando.