CSS:如何制作保证金:0px自动工作

Question

我试图将图像置于另一个块内:

html代码如下所示:

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

我想要做的是将图像放在li的中心.(见http://img.skitch.com/20091128-xf36n8ekhpxyi5rdgnuqrtw36a.png)

css看起来像这样:

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;

}

可在网站上访问完整代码:http://j-in.org.ua/article/art/

提前致谢!

Answer 1

为了margin: 0 auto工作,图像需要是块级元素.加:

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

并且图像像你想要的那样弹入中心.