Центрирование (по горизонтали и вертикали) изображений в элементе div, конфликтующем со слайд-шоу jQuery - PullRequest
Новая
       34

Центрирование (по горизонтали и вертикали) изображений в элементе div, конфликтующем со слайд-шоу jQuery

0 голосов
/ 20 января 2012

Я знаю, что есть тонны постов о центрировании изображений внутри div как по вертикали, так и по горизонтали. Это не моя проблема. Я смог это сделать.

Я создаю веб-сайт для портфолио моего друга-фотографа (пользовательская тема Wordpress). Вы можете увидеть это здесь: http://alexdebrabant.com/front На некоторых страницах его сайта есть только одно изображение, и в этом случае у меня нет проблем с центрированием изображения по вертикали и горизонтали в пределах div .imgcontent (используя комбинацию отображения: table-cell, vertical-align: middle и text -align: центр) Вы можете увидеть успешные примеры здесь: http://www.alexdebrabant.com/blog/emilia/ (полная высота и правильное выравнивание по горизонтали) http://www.alexdebrabant.com/blog/trusst-2/ (полная ширина и правильная вертикальная ориентация)

Однако на некоторых других страницах есть несколько картинок, «обернутых» в слайд-шоу jQuery. На этих страницах я не могу центрировать изображения с помощью div. Они выравниваются по левому верхнему углу. Вы можете увидеть пример здесь: http://www.alexdebrabant.com/blog/divine-2/ (выравнивание по верхнему левому краю div)

Я считаю, что проблема вызвана слайд-шоу jQuery, которое, насколько я понимаю, на самом деле загружает все картинки, но затем скрывает все, кроме одной.

Я надеялся, что у кого-то может быть идея, как преодолеть эту проблему. Спасибо!

1 Ответ

1 голос
/ 20 января 2012

Проблема вызвана плагином слайд-шоу, который применяет position: absolute; top:0; left:0 к изображениям, если их несколько.Это фактически отменяет определения выравнивания, назначенные родительскому элементу.

Глядя на переход, изображения смешиваются друг с другом, поэтому они должны быть абсолютно позиционированы (другого способа добиться этого не существует).

Я думаю, что будет работать следующее: Изменить 

<div class="imgcontent">
    <img.../>
    <img.../>
</div>

На: 

<div class="imgcontent">
    <div class="img-slide"><div class="img-cell"><img.../></div></div>
    <div class="img-slide"><div class="img-cell"><img.../></div></div>
</div>

С CSS: 

.img-slide, .img-cell {
    height: 660px;
    width: 880px;
}
.img-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Поскольку размеры контейнера (.imgcontent)Известно, мы применяем их к оберткам.Оболочка img-slide станет абсолютно позиционированной плагином, но ее содержимое должно работать так же, как и для одного изображения.

...