Как вертикальное выравнивание элементов в div?

Question

У меня есть div с двумя изображениями и h1. Все они должны быть вертикально выровнены внутри div, рядом друг с другом.

Одно из изображений должно быть absolute расположено внутри div.

Какой CSS необходим для работы во всех распространенных браузерах?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Answer 1

Ух, эта проблема популярна. Он основан на недоразумении в свойстве vertical-align. Эта превосходная статья объясняет это:

Понимание vertical-align, или «Как (не) вертикальное центрирование контента» , Гэвин Кистнер.

«Как центрировать в CSS» - это отличный веб-инструмент, который помогает найти необходимые атрибуты центрирования CSS для различных ситуаций.

---

В двух словах _{^{(и для предотвращения гниения звена)}} :

• Встроенные элементы (и только встроенные элементы) могут быть выровнены по вертикали в контексте с помощью vertical-align: middle. Однако «контекст» - это не вся высота родительского контейнера, а высота текстовой строки, в которой они находятся. jsfiddle пример
• Для блочных элементов вертикальное выравнивание сложнее и сильно зависит от конкретной ситуации:
  • Если внутренний элемент может иметь фиксированную высоту , вы можете установить его положение absolute и указать его height, margin-top и top. jsfiddle пример
  • Если центрированный элемент состоит из одной строки и , его родительская высота фиксирована , вы можете просто установить line-height контейнера, чтобы заполнить его высоту. Этот метод довольно универсален по моему опыту. Пример jsfiddle
  • ... таких особых случаев больше.

Answer 2

Теперь, когда поддержка flexbox увеличивается, этот CSS, примененный к содержащему элементу, будет вертикально центрировать содержащийся элемент:

.container {        
    display: flex;
    align-items: center;
}

Используйте префиксную версию, если вам также нужно ориентироваться на Explorer 10 и старые (<4.4) браузеры Android: </p>

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Answer 3

Я использовал этот очень простой код:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Очевидно, используете ли вы .class или #id, результат не изменится.

Answer 4

у меня сработало:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Answer 5

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Answer 6

Техника от моего друга:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

ДЕМО здесь

Answer 7

Все они должны быть выровнены по вертикали внутри div

выровнен как ? Вершины изображений выровнены по верху текста?

Одно из изображений должно быть в абсолютном положении внутри div.

Абсолютно позиционируется относительно DIV? Возможно, вы могли бы набросать то, что вы ищете ...?

fd описал этапы абсолютного позиционирования, а также настройку отображения элемента H1 таким образом, чтобы изображения отображались вместе с ним. К этому я добавлю, что вы можете выровнять изображения, используя стиль vertical-align:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... это объединит заголовок и изображения с выровненными верхними краями. Существуют другие варианты выравнивания; см. Документацию . Также может оказаться полезным сбросить DIV и переместить изображения внутри элемента H1 - это обеспечивает семантическое значение для контейнера и устраняет необходимость настройки отображения H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Answer 8

Чтобы расположить элементы блока по центру (работает в IE9 и выше), требуется оболочка div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Answer 9

Используйте эту формулу, и она будет работать всегда без трещин:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Answer 10

Мой трюк состоит в том, чтобы поместить в div таблицу с 1 строкой и 1 столбцом, установить 100% ширины и высоты, а также свойство vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/