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

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

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

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

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

Основной 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.

Любая помощь будет здорово.

РЕДАКТИРОВАТЬ Перепутал css, перепутал классы.


html css position positioning
person Michael Allen    schedule 24.07.2011    source источник
comment
В случае, если это упрощает: я знаю, как легко сделать каждую из частей: центрировать div - поля слева и справа автоматически; Выровнять нижние части div по отношению к родительскому div - относительное положение родительского элемента, абсолютное положение дочернего элемента, нижнее 0px для дочернего элемента; Проблема в том, что эти две вещи взаимоисключающие, нельзя иметь одно, имея при этом другое.   -  person Michael Allen    schedule 24.07.2011
comment
Я добавил фактическое решение в качестве ответа на случай, если кто-то ищет аналогичную проблему.   -  person Michael Allen    schedule 25.07.2011

Ответы (4)


arrow_upward
1
arrow_downward

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

.image{
    width: 218px;
    height: 218px;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
 }
person Matop79    schedule 24.07.2011
comment
У меня были классы CSS неправильно, извините. Класс imageBox фиксированный, изображение внутри него имеет меньший размер (максимум 200px x 200px) и находится абсолютно в нижней части div imageBox. Поскольку его позиция является абсолютной, такие вещи, как выравнивание текста, не будут иметь эффекта (и поскольку div являются элементами уровня блока в совместимых браузерах, выравнивание текста не должно работать) - person Michael Allen; 24.07.2011
comment
text-align: center не был целью моего ответа. Но эта строка: margin: 0 px Хорошо, я рад, что вы решили это по-своему. - person Matop79; 24.07.2011
comment
Нет, я не решил ее. Просто ваше решение не сработает. Напутал в моем комментарии выше, я имел в виду, что маржа 0px auto тоже не будет работать. Поскольку изображение имеет абсолютную позицию и нижнее 0 пикселей, поле не влияет на позиционирование. - person Michael Allen; 24.07.2011

arrow_upward
1
arrow_downward

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

<!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 родительского элемента.

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

person knut    schedule 24.07.2011

arrow_upward
0
arrow_downward

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

.image{
    position: relative !important;
}
person rkw    schedule 24.07.2011
comment
Единственный css, применяемый к этим элементам, - это css, показанный в моем вопросе, поэтому !important не будет ничего переопределять, поскольку нечего переопределять - person Michael Allen; 24.07.2011

arrow_upward
0
arrow_downward

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

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

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

person Michael Allen    schedule 24.07.2011
comment
Итак, вы хотели, чтобы ваши изображения располагались в центре нижней части контейнера? - person knut; 25.07.2011