1

画像を別のブロックの中央に配置しようとしています。

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/

前もって感謝します！

4

2 に答える 2

8

が機能するためmargin: 0 autoには、画像がブロック レベルの要素である必要があります。追加：

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

画像が好きなように中央に表示されます。

于 2009-11-28T07:49:58.450 に答える
0

私の同様のケースでは、 a span(3input秒) を a の中央に配置しようとしていましたdiv:

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

その場合、Magnar のソリューションspanを使用するとauto width、 が全体を埋めますdiv。（でdisplay: block;）動作させるには、動作させるために a を設定する必要がありますwidth。しかし、そこに s がいくつあるかはわかりませんinput。そのため、少なくとも私の場合は、display: table;次を使用してより良い解決策を見つけました。

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

sはtable内容に合わせて薄く表示されるので、 を設定display: tableすることで、求めていたセンタリングが実現できました。

于 2014-01-16T15:29:54.393 に答える