CSS: how to make margin: 0px auto work

Question

Hi!

I am trying to center images inside another block:

The html code looks like this:

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

What I want to do is to place the image in the center of li. (see http://img.skitch.com/20091128-xf36n8ekhpxyi5rdgnuqrtw36a.png)

The css looks this way:

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;

}

Complete code may be accessed on the site: http://j-in.org.ua/article/art/

Thanks in advance!

Answer 1

I went to see your page's source code. You should have the DOCTYPE line on the first line with no whitespaces for it to work.

By the way, your page has failed the XHTML validation badly.

In this case, you can wrap <div style="text-align:center;"> and </div> around the image to centralized the image.

Answer 2

In order for margin: 0 auto to work, the images need to be block level elements. Add:

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

and the images pop into the center like you want.