CSS: как сделать маржу: 0px auto работает - PullRequest
Новая
       6

CSS: как сделать маржу: 0px auto работает

1 голос
/ 28 ноября 2009

Я пытаюсь центрировать изображения внутри другого блока:

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 /

Заранее спасибо!

Ответы [ 2 ]

8 голосов
/ 28 ноября 2009

Чтобы margin: 0 auto работал, изображения должны быть элементами уровня блока. Добавить: 

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

и изображения появляются в центре, как вы хотите.

0 голосов
/ 16 января 2014

В моем аналогичном случае я пытался центрировать span (с 3 input с) внутри div: 

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

Используя решение Магнара , в этом случае span s auto width заполняет все div. Чтобы заставить его работать (с display: block;), для его работы необходимо установить width. Но я не знаю, сколько будет input s, поэтому я пришел с лучшим решением, по крайней мере для моего случая, используя display: table;: 

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

* * * * * * * * * * * table отображаются так, чтобы соответствовать их содержанию, поэтому, установив display: table, я мог бы добиться того, что искал.

...