Вертикально центрировать элементы в CSS

Question

У меня есть два элемента рядом. Элемент 2 меньше, чем Элемент 1. Оба элемента не имеют фиксированной высоты. Мне нужно вертикально отцентрировать Элемент 2. Как мне добиться этого с помощью CSS?

Отредактировано:

Это то, что я имею до сих пор:

<div id="container" style="width: 100%;">
    <div id="img1" style="float: left;">
        <img src="image1.jpg".../>
    </div>
    <div id="img2" style="float: right;">
        <img src="image2.jpg".../>
    </div>
</div>

высота img1 всегда будет больше, чем высота img2. Я хочу, чтобы img2 был выровнен по центру. Надеюсь, это проясняет то, что я пытаюсь достичь.

Answer 1

Самый простой и понятный способ сделать это - использовать display: table и выравнивание по вертикали. Тем не менее, IIRC (с тех пор как я занимался вопросами совместимости браузеров) давно не поддерживал display: table и его друзей в ... какой-то распространенной версии IE, возможно? В любом случае, добавление других правил для адекватного отступления, если игнорируется display: table, может быть хорошим.

<div id="container" style="display: table;">
    <div id="div1" style="display: table-cell; vertical-align: middle;">
        <img id="img1" src="image1.jpg" />
    </div>
    <div id="div2" style="display: table-cell; vertical-align: middle;">
        <img id="img2" src="image2.jpg" />
    </div>
</div>

(Конечно, стили должны быть в таблице стилей; это просто соответствует вашему исходному примеру и не знает варианта использования.)

Значения display table, table-row и table-cell в основном работают точно так же, как HTML table, tr и td, но вы можете опустить любое из них (как я сделайте это, используя table-cell s непосредственно в table s), и механизм компоновки сделает разумную вещь.

Answer 2

не легко. Некоторые популярные хаки включают использование display: table-cell и родительское использование display: table (я не помню, нужен ли атрибут valign = "center"), или использование абсолютного позиционирования с top: 45% или около того (не точно, но хорошо для небольших элементов).

Чтобы определить лучший метод, нам нужно больше узнать о вашем макете. Что они сосредоточены внутри? Будет ли / может быть большое расстояние Y между элементами 1 и 2? У их родителей фиксированная высота? У них обоих есть одни и те же родители, или один из них один с другим? Какой метод вы используете, чтобы разместить их рядом?

Имейте в виду, что многие хитрости требуют дополнительного взлома для работы в IE, и что использование Javascript просто обманывает и сделает ваш сайт недоступным / раздражающим для людей со слабым зрением (которые могут использовать программы чтения с экрана, не поддерживающие сценарии), людей с отключенными скриптами (особенно в мобильных браузерах или браузерах командной строки, которые могут вообще не поддерживать их), в поисковых системах и т. д. Это возможно с использованием только CSS (хотя вам, возможно, придется добавить некоторые элементы контейнера), но точным методом зависит, что именно ты делаешь.

Answer 3

Если вам требуется только поддержка новых браузеров, таких как Safari (например, создание веб-приложения для iPhone), CSS3 предлагает элегантный подход без плавающих или отрицательных полей. Все подробности здесь: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

Answer 4

Я не думаю, что вы можете сделать это надежно без стола. Решение Кевина, вероятно, будет работать, если только вам не нужна поддержка IE (что делают большинство из нас). И в этом случае разметка таблицы может фактически быть меньше разметки на основе div.

Answer 5

Поместите их в другой элемент, задайте минимальную ширину и установите для левого и правого полей значение auto.