Как отцентровать картинку неизвестных размеров внутри блока?

  • Автор темы Tander
  • Дата начала
T

Tander

Гость
#1
Никак не получается разместить картинку по центру. Вот так выглядит HTML:
Код:
<a class="gallery" href="img/part-1/Nicolas_001.jpg"><img src="img/part-1/Nicolas_001.jpg" class="gallery"></a>
<a class="gallery" href="img/part-1/Nicolas_002.jpg"><img src="img/part-1/Nicolas_002.jpg" class="gallery"></a>
<a class="gallery" href="img/part-1/Nicolas_004.jpg"><img src="img/part-1/Nicolas_004.jpg" class="gallery"></a>
(и таких несколько десятков)
А вот мой текущий CSS-код:
Код:
/* Галлерея */
a.gallery {
border: 1px solid gray; /*Стиль рамки */
background-color: #f6f6f6; /*Фоновый цвет ячейки*/
width: 230px; /*Ширина ячейки*/
height: 230px;
padding: 5px;
margin: 5px; /*Ширина отступов*/
display: inline-block;
text-align:center;
}

img.gallery {
max-width: 230px; /* Ширина картинки*/
max-height: 230px;
height: auto;
width:auto;
border: 0px;
}
На данный момент картинка "отцентрована" по горизонтали, но по вертикали не получается вообще. И что больше всего мне не нравится - это выглядит так как будто ссылка выравнивается относительно картинки, хотя должно быть наоборот.
Ну, с таким кодом это выглядит так:

 
N

nws

Гость
#2
img.gallery {
max-width: 230px; /* Ширина картинки*/
max-height: 230px;
border: 0px;
margin-left: auto;
margin-right: auto;

}
 
T

Tander

Гость
#3
img.gallery {
max-width: 230px; /* Ширина картинки*/
max-height: 230px;
border: 0px;
margin-left: auto;
margin-right: auto;

}
margin - это же отступ вовнутрь, какой смысл его прописывать картинке?
Но я все равно попробовал - не работает.
Насколько я понимаю - это была попытка выровнять по горизонтали. У меня это делает строка text-align:center;, прописанная в стиле ссылки. Моей проблемой является центровка по вертикали - я никак не могу найти толкового описания, как это можно сделать...
 
T

Tander

Гость
#5
Посмотрите внимательней на мой код. Особенно на это:

Код:
	width: 230px;
height: 230px;
У меня ссылка является квадратным блоком с фиксированной высотой и шириной. А в вашем примере у вас высота блока такая же как высота картинки.