У меня есть div под названием images_box
, который имеет ширину 277px
. Внутри этого div у меня есть 9 изображений, просто сохраненных как <a>
тегов. У меня есть изображения, чтобы плавать влево и выстраиваться довольно хорошо в моем div, но я хотел бы, чтобы изображения выравнивались по вертикали, так как некоторые из них являются портретами, а другие - ландшафтными. Я знаю, что могу сделать это, если я заключу каждое изображение в div, но плагин, который я использую для запуска галереи, не будет распознавать, какое изображение запускается, поэтому мне нужно заключить их как только в теги <a>
.вертикальное выравнивание img
Это код, который у меня есть, если кто-то может помочь мне выравнивать изображения по горизонтали и по вертикали. Я не хочу, чтобы изображения были перекошены.
#images_box a {
float: left;
padding: 9px;
width: 70px;
height: 70px;
text-align: center;
vertical-align: middle;
display: table-cell;
}
мои данные
<div id="images_box">
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)">
<img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Self confined... (TVidhya)">
<img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg" title="kleiner schrittmacher (KatjaGiersig)">
<img src="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_b.jpg" title="(caro diario.)">
<img src="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_m.jpg" alt="" />
</a>
</div>
Вы ищете Vertica l центрируется вокруг центральной линии независимо от высоты изображения или вертикального выравнивания вверху? – Tom
Попробуйте добавить 'line-height: 70px'. Также немного уберите свой вопрос. Ваш html говорит 'images' и ваш css' imagesbox'. Также изображения в вашем html намного больше, чем 70 пикселей. – Gerben
Привет, Том, да, это именно то, что я пытаюсь сделать. Gerben, спасибо, обновлено оригинальное сообщение - добавлено ваше предложение, но мои изображения по-прежнему выровнены. – JK36