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

并且图像会像您想要的那样弹出中心。

Answer 2

在我的类似情况中，我试图将span（包含3 input s）置于div内：

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

在这种情况下使用Magnar's solution，span的{{1}} auto会填满整个width。要使其工作（使用div），需要设置display: block;才能使其正常工作。但是我不知道会有多少width，所以我提出了一个更好的解决方案，至少在我的情况下，使用input：

display: table;

#featurePaginator span { margin: 0px auto; display: table; }显示为与其内容一样薄，因此，通过设置table，我可以实现我正在寻找的中心。

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

2 个答案: