CSS: как сделать маржу: 0px auto работает
Вопрос
Я пытаюсь центрировать изображения внутри другого блока:
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 выглядит следующим образом: Полный код можно получить на сайте: http://j-in.org .ua / статьи / искусство / Заранее спасибо! 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;
}
Решение
Чтобы margin: 0 auto
работал, изображения должны быть элементами уровня блока. Добавить:
ul#related li a img {
display: block;
margin: 0 auto;
}
и изображения появляются в центре, как вы хотите.
Другие советы
В моем аналогичном случае я пытался центрировать 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 , в этом случае span
автоматически auto
width
заполняет весь div
. Чтобы заставить его работать (с display: block;
), для его работы необходимо установить width
. Но я не знаю, сколько там будет input
, поэтому я нашел лучшее решение, по крайней мере для моего случая, с использованием display: table;
: р>
#featurePaginator span {
margin: 0px auto;
display: table;
}
Таблицы table
отображаются такими же тонкими, как их содержимое, поэтому, установив display: table
, я смог добиться нужного центрирования. р>