Вертикальное выравнивание изображений в старых браузерах

Я использую следующий плагин галереи на веб-сайте. http://www.twospy.com/galleriffic/example-2.html Вертикальное выравнивание изображений в старых браузерах

Обратите внимание, что изображения вертикально выровнены по центру. Div, содержащий изображения, имеет свойство вертикального выравнивания и высоту линии, установленную на размер высоты div. К сожалению, изображения не совпадают с посередине в старых браузерах, таких как AOL ..

Какой css можно использовать для выравнивания?

источник

2011-12-29 CyberJunkie

Старые браузеры, такие как AOL ??? – Wex

Я говорю, что, поскольку AOL все еще кажется старым, несмотря на обновления. – CyberJunkie

Существует множество способов сделать вертикальное центрирование с различными уровнями совместимости. Первые два результата Google дают хорошие методы:

Один, который может хорошо работать для вас является абсолютным метод позиционирования. Это зависит от того, насколько точно вы знаете высоту изображения, но для галереи изображений вы, вероятно, будете отображать все изображения на одной высоте. По существу:

.img-container { 
    position: relative; 
} 

.img-container img { 
    height: 400px;  /* up to you what the correct height is */ 
    margin-top: -200px; /* put here 1/2 of the image height from above */ 
    position: absolute; 
    top: 50%; 
}

для разметки что-то вроде

<div class="img-container"> 
    <img src="whatever.jpg" /> 
</div>

источник

2011-12-29 20:24:21 Domenic

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

Спасибо, это хорошее решение, но предположим, что я не знаю высоту изображений. – CyberJunkie

В этом случае вы не можете сделать это с помощью CSS для старых браузеров, так как ссылки, которые я показывал в своих таблицах совместимости с браузерами. Вам понадобится JavaScript. – Domenic

Если я хорошо понял ваш вопрос, то, я думаю, я боюсь сказать, что его невозможно достичь только с помощью CSS. В этом случае вам может потребоваться рассчитать ширину и высоту контейнера div, который удерживает изображение, а затем разделить его на два, чтобы найти центр и поместить ваше изображение там.

margin: 0 auto; будет выровнять по горизонтали, а не по вертикали.

Примечание: Это будет чисто jquery.

источник

2011-12-29 20:22:42 defau1t

Вы запутываете jQuery и JavaScript? – Domenic

Нет, я действительно продвигаю jquery. и оба будут работать – defau1t

http://www.doxdesk.com/updates/2009.html#u20091116-zalgo и особенно http://www.doxdesk.com/img/updates/20091116-so-large.gif актуальны в таком случае. – Domenic

Вы можете заставить высоту на изображение для определенного размера, положения изображения абсолютно относительной емкости в верхней части: 50% с разницы-топ - (50% высоты) px. Это будет чисто css-решение.

источник

2011-12-29 20:26:18

Ваш лучший метод для вертикально-выравнивая использовать атрибут vertical-align CSS:

<div id="thumbs"> 
    <!--Thumbnails for images--> 
</div><div id="gallery"> 
    <!--Images--> 
</div>

CSS:

#thumbs { 
    vertical-align: middle; 
    display: inline-block; } 
#gallery { 
    vertical-align: middle; 
    display: inline-block; } 
#gallery img { display: block; }

Preview: http://jsfiddle.net/Wexcode/PHrw5/

источник

2011-12-29 22:05:09 Wex

Вертикальное выравнивание уже установлено и не работает в ужасных браузерах, таких как AOL.Я ищу полнофункциональное решение. Я думаю, что js является ключевым, о чем говорят другие. – CyberJunkie

Вертикальное выравнивание изображений в старых браузерах

ответ

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