Центр динамической ширины div внутри фиксированной ширины div - PullRequest
Новая
       14

Центр динамической ширины div внутри фиксированной ширины div

3 голосов
/ 24 июля 2011

У меня довольно большой опыт работы с css, и даже эта проблема поставила меня в тупик.

Я создаю тему плагина галереи NextGen для Wordpress, что означает, что я не могу контролировать HTML, и у меня возникла проблема при попытке выстроить изображения в ряд.

В NextGen максимальный размер изображения составляет 200 x 200 пикселей. Изображения представляют собой миниатюры больших изображений, каждое со своими собственными ограничениями по размеру и размеру, но все они имеют размер менее 200px x 200px

Основная цель:
Изображение класса имеет фиксированную ширину, но его ширина изменяется в зависимости от изображения внутри него. Класс imageBox окружает изображения и имеет ширину, фиксированную до максимальной ширины изображений (ширина 200 пикселей, высота 200 пикселей). Для изображений шириной не более 200 пикселей я хочу, чтобы они располагались в центре поля изображения.

Основной HTML-код, созданный галереей NextGen: 

<div class="imageBox">
   <div class="image">
      <img />
   </div>
</div>

Мой CSS пока: 

.imageBox{
    width: 218px;
    height: 218px;
    float: left;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.image{
    margin-right: 5px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    display: inline-block;
}

Я использовал абсолютное позиционирование, чтобы гарантировать, что все изображения выровнены вдоль их нижнего края, таким образом, нижнего: 0px.

Любая помощь будет отличной.

EDIT Перепутал css, уроки были неправильными.

Ответы [ 4 ]

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

Этот упрощенный пример, который работает, если у вас есть указанное изображение, работает довольно хорошо: 

<!doctype html>
<html>
<head>
    <title>Centered images</title>
    <style type="text/css">
        .imageBox
        {
            float: left;
            background: cyan;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        img
        {
            vertical-align: middle;
            background: magenta;
            position: relative;
            bottom: 2px;
        }
    </style>
</head>
<body>
    <div class="imageBox">
        <img src="img.png" width="200px" alt="Image." />
    </div>
    <div class="imageBox">
        <img src="img.png" width="190px" alt="Image." />
    </div>
    <div class="imageBox">
        <img src="img.png" width="180px" alt="Image." />
    </div>
</body></html>

Существует небольшая вертикальная разница 2px в Internet Explorer 7 и Opera.

Хитрость здесь в том, чтобы использовать свойство vertical-align. Это немного особенное и используется в сочетании со свойством line-height родительского элемента.

Дополнительная информация:

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

Попробуйте это: 

.image{
    width: 218px;
    height: 218px;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
 }
0 голосов
/ 25 июля 2011

Решение состоит в том, чтобы задать фиксированную ширину 200 пикселей для класса изображения и установить его с абсолютным положением и 0px снизу.Это заставляет его привязываться к низу класса imageBox, занимая всю ширину его контейнера.

Поскольку div изображения теперь находится внизу и на всю ширину, все, что нужно, это центрировать изображение, поэтому я применил поле 0px auto к классу image> img, центрируя изображение и решая мою проблему.

Это можно увидеть здесь .

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

Я никогда не работал с WordPress, поэтому я не уверен, каковы ограничения;но можете ли вы переопределить их css с помощью важного тега? 

.image{
    position: relative !important;
}
...