CSS: вертикально центрирующиеся imgs с различной высотой / шириной внутри статически расположенного div - PullRequest
Новая
       6

CSS: вертикально центрирующиеся imgs с различной высотой / шириной внутри статически расположенного div

0 голосов
/ 20 июля 2011

Это меня совершенно озадачило. Я довольно новичок в CSS и DIV, поэтому, пожалуйста, потерпите меня.

Я пытаюсь создать галерею изображений на основе DIV.

Макет выглядит следующим образом ... 

<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>

Все изображения представлены в виде миниатюр, но миниатюры различаются по размеру (но все они меньше, чем 150x150 пикселей), что, по-видимому, исключает все решения с вертикальным выравниванием, которые я нашел, особенно в сочетании с тем фактом, что строки делятся и контейнер статически расположены.

Извините, если раньше об этом спрашивали, но я часами просматривал и этот сайт, и Google и не нашел ничего, что, похоже, работает.

Заранее спасибо за любую помощь!

EDIT3: Для справки, сайт, над которым я работаю, находится здесь: http://utsa.edu/honors/?page=international/china_new

РЕДАКТИРОВАТЬ1: @ Роберт: Спасибо за предложение класса / ID. Поменял это. Я не верю, что предложенное вами вертикальное центрирование сработает. Поскольку ваши изображения имеют одинаковый размер, отступы и поля располагаются по центру. У меня все разные высоты.

EDIT2: @Nowhere: это было первое, что я попробовал. Из того, что я прочитал, это не работает, потому что содержащие DIVs не позиционируются абсолютно. Хотя я не знаю.

Ответы [ 2 ]

1 голос
/ 20 июля 2011

.img-container img {vertical-align: middle ;} отлично работает для меня с изображениями разной высоты и ширины.Их вертикальные центры правильно выровнены ...

Если вы не нашли решения в CSS, вы можете подумать о том, чтобы программа генерировала изображения из существующих миниатюр: вы конвертируете их в изображения размеромсамые большие, окружающие меньшие прозрачной рамкой (в формате, который поддерживает прозрачность как PNG).

0 голосов
/ 20 июля 2011

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

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

<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            background-color: #666;
            text-align: center;
        }

        #container {
            background-color: #fff;
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
            padding: 10px;
        }

        .row {
            clear: both;
            padding: 15px 0;
        }

        .img-container {
            float: left;
            width: 33%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div>
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div>
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div> 

    </div>
</body>

...