Центрирование изображения в CSS отзывчивой фотогалерее ж/подписи

Моей цель состоит в том, чтобы иметь простую адаптивную CSS галереи фотографий, где (а) изображений по центру вертикально в пределах каждой строки (б) каждая строка изображения центрируются по горизонтали (с) заголовок центрируется по горизонтали под каждым изображениемЦентрирование изображения в CSS отзывчивой фотогалерее ж/подписи

Я пытался следующий код: http://www.terragalleria.com/tmp/test-align.html

<!DOCTYPE HTML> 
<HTML> 
<head> 

<style> 
.centered_block { 
clear: both; 
display: block; 
margin-left: auto; 
margin-right: auto; 
text-align:center; 
} 

.img_with_link { 
padding: 0.5em; 
float: left; 
display: table; 
width: 240px; 
height: 240px; 
text-align: center; 
} 

.img_with_link_inside { 
display: table-cell; 
vertical-align: middle; 
} 

div.img_with_link img { 
display: inline; 
margin: 0.5em; 
} 

.link_with_img { 
} 

</style> 

</head> 

<BODY> 

<div class="centered_block"> 

<div class = "img_with_link"> 
<div class = "img_with_link_inside"> 
<img src = "http://www.terragalleria.com/images/np-pacific/olym11102.small.jpeg"> 
<div class = "link_with_img"> 
Olympic 
</div> 
</div> 
</div> 

<div class = "img_with_link"> 
<div class = "img_with_link_inside"> 
<img src = "http://www.terragalleria.com/images/np-pacific/redw1447.small.jpeg"> 
<div class = "link_with_img"> 
Redwood 
</div> 
</div> 
</div> 

<div class = "img_with_link"> 
<div class = "img_with_link_inside"> 
<img src = "http://www.terragalleria.com/images/np-pacific/chis1466.small.jpeg"> 
<div class = "link_with_img"> 
Channel Islands 
</div> 
</div> 
</div> 

</div> 

</BODY> 
</HTML>

Вот результирующее окно браузера:

resulting browser window http://www.terragalleria.com/tmp/medium.jpg

Вот что я пытаюсь получить:

desired browser window http://www.terragalleria.com/tmp/medium-desired.jpg

Обратите внимание, что трудность здесь, кажется, вызваны титрами. Я могу получить этот результат (критерии встречи (а) и (б)) без заголовка, см. http://www.terragalleria.com/mobile/np.olympic.html

Любые идеи о том, как исправить код? Спасибо

источник

2015-03-30 Quang-Tuan Luong

.img_with_link не должны плавать: слева. Удалите это, чтобы увидеть, что происходит, и если оно не работает, добавьте clear: both; А также удалить свойства отображения таблицы; вам это не нужно. – frenchie

frenchie избили меня, но это сработало в моем браузере: '.img_with_link { padding: 0.5em; дисплей: встроенный блок; ширина: 240px; высота: 240px; text-align: center; } ' – brenzy

Спасибо за быстрые предложения. Если я просто удаляю float: left, то я получаю одно изображение в строке, а не мое намерение, которое должно содержать изображения, заполняющие строки. –

Подумайте, что это хорошо, как, что:

.centered_block { 
    clear: both; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

.img_with_link { 
    padding: 0.5em; 
    display: inline-block; 
    vertical-align: top; 
} 

.img_with_link_inside { 
    display: table-cell; 
    width: 240px; 
    height: 240px; 
    vertical-align: middle; 
}

только испытаны в Chrome, Firefox и IE 11. display: table-cell; используется для обеспечения vertical-align: middle и для центровки что-то ваш блок нужно иметь ширину. (который может быть рассчитан, если все дети имеют ширину, я думаю ...) Кроме того, я добавляю display: inline-block; для замены float: left.

источник

2015-03-31 00:31:02

Спасибо, я также успешно тестировал Safari (как OSX, так и iOS). –

я надеюсь помочь, может поставить главный DIV и изображений в пределах этого (иллюстративный пример)

<a>http://jsfiddle.net/step/k5yb8wqo/</a>

источник

2015-03-31 00:34:42 step

Центрирование изображения в CSS отзывчивой фотогалерее ж/подписи

ответ

Смежные вопросы