2012-06-16 1 views
1

У меня есть 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> 
+1

Вы ищете Vertica l центрируется вокруг центральной линии независимо от высоты изображения или вертикального выравнивания вверху? – Tom

+0

Попробуйте добавить 'line-height: 70px'. Также немного уберите свой вопрос. Ваш html говорит 'images' и ваш css' imagesbox'. Также изображения в вашем html намного больше, чем 70 пикселей. – Gerben

+0

Привет, Том, да, это именно то, что я пытаюсь сделать. Gerben, спасибо, обновлено оригинальное сообщение - добавлено ваше предложение, но мои изображения по-прежнему выровнены. – JK36

ответ

1

Думаю, я понял, что вы хотите. float: left для получения изображений рядом не требуется.

#images_box { 
    background: #eee; 
    overflow: hidden; /* this div will get the height of the tallest element inside it */ 
    white-space: nowrap; /* prevent line-breaks */ 
} 


#images_box a { 
    padding:9px; 
    display: inline-block; /* required to apply vertical-align as expected */ 
    vertical-align: middle; 
}​ 

Работы в:

  • Internet Explorer 6+
  • и современные браузеры

Live Demo: http://jsfiddle.net/vjDVp/1/

+0

Спасибо, топ-тройка, ваше решение ударило, решает вопрос, который у меня был. Я удивлен, что вам не нужен поплавок: слева - подумал, что это единственный способ получить картинки, которые текут в моем div правильно, но, очевидно, нет. Еще раз спасибо :) – JK36

0

В основном, это кажется, что вы ищете:

#images a { 
    padding: 9px; 
    width: 70px; 
    height: 70px; 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 
} 

Где вы можете настроить vertical-align к top или middle, по мере необходимости. Нет необходимости в поплавках. Размеры, которые вы описали в исходном вопросе, отключены, поэтому извините, если я неправильно понял.

Обратите внимание, что display: table-cell не является IE6/7-friendly, если это имеет значение.

+0

Привет, Том, это делает именно то, что я хочу, хотя изображения не содержатся в моем div. Поэтому я добавляю float: left, и изображения выравниваются вверху, а не центру. – JK36

0

Установите css на изображения, а не на теги a. Дайте им имя класса (чтобы убедиться, что ваши другие изображения не затронуты) и примените код, который вы указали в своем вопросе, к этому (img.myclass). Или, по крайней мере, vertical-align.

Кроме того, каковы размеры изображений? Все ли они имеют одинаковую ширину, ту же высоту или определенный размер в зависимости от того, является ли это пейзажным или портретным изображением?

Ой, и я не знаю, почему, но text-align, похоже, тоже работает с тегами img.