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

<p>у меня есть div с двумя изображениями и <code>h1</code>. все они должны быть вертикально выровнены внутри div, рядом друг с другом.</p><p>одно из изображений должно быть <code>absolute</code> помещено в div.</p><p>какой css необходим для работы всех распространенных браузеров?</p><pre><code><div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div> </code></pre>

<p>вау, эта проблема популярна. он основан на недоразумении в свойстве <code>vertical-align</code>. эта превосходная статья объясняет это:</p><p> <a href="http://phrogz.net/css/vertical-align/index.html">понимание <code>vertical-align</code> или "как (не) вертикальное центрирование контента"</a> гэвин кистнер.</p><p><strong> <a href="http://howtocenterincss.com/">"как центрировать в css"</a> </strong> - отличный веб-инструмент, который помогает найти необходимые атрибуты центрирования css для различных ситуаций.</p><hr><p>в двух словах <sub><sup>(и для предотвращения гниения ссылок)</sup></sub>:</p><ul> <li><strong> встроенные элементы </strong> (и <em>только</em> встроенные элементы) могут быть выровнены по вертикали в их контексте с помощью <code>vertical-align: middle</code>. однако "контекст" - это не вся высота родительского контейнера, а высота текстовой строки, в которой они находятся. <a href="http://jsfiddle.net/jbthq/">пример jsfiddle</a> </li> <li>для блочных элементов вертикальное выравнивание сложнее и сильно зависит от конкретной ситуации: <ul> <li>если внутренний элемент может иметь <strong> фиксированную высоту </strong>, вы можете установить его положение <code>absolute</code> и указать его <code>height</code>, <code>margin-top</code> и <code>top</code>. <a href="http://jsfiddle.net/yfncp/2/">пример jsfiddle</a> </li> <li>если центрированный элемент <strong> состоит из одной строки </strong> <em>and</em> <strong>, его родительская высота является фиксированной </strong> вы можете просто установить <code>line-height</code> контейнера, чтобы заполнить его высоту. этот метод довольно универсален по моему опыту. <a href="http://jsfiddle.net/d4zgf/">пример jsfiddle</a> </li> <li>... есть еще такие особые случаи.</li> </ul> </li> </ul>

<p>теперь, когда поддержка flexbox увеличивается, этот css, примененный к содержащему элементу, будет вертикально центрировать содержащийся элемент:</p><pre><code>.container { display: flex; align-items: center; } </code></pre><p>используйте префиксную версию, если вам также нужно ориентироваться на explorer 10 и старые (<4.4) android браузеры:</p><pre><code>.container { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } </code></pre>

<p>я использовал этот очень простой код:</p><p>html:</p><pre><code><div class="ext-box"> <div class="int-box"> <h2>some txt</h2> <p>bla bla bla</p> </div> </div> </code></pre><p>css:</p><pre><code>div.ext-box { display: table; width:100%;} div.int-box { display: table-cell; vertical-align: middle; } </code></pre><p>очевидно, что, используете ли вы <code>.class</code> или <code>#id</code>, результат не изменится.</p>

<p>это сработало для меня:</p><pre><code>.vcontainer { min-height: 10em; display: table-cell; vertical-align: middle; } </code></pre>

<pre><code> .outer { display: flex; align-items: center; justify-content: center; } </code></pre>

<p>техника от моего друга:</p><p>html:</p><pre><code><div style="height:100px; border:1px solid;"> <p style="border:1px dotted;">i'm vertically centered.</p> </div> </code></pre><p>css:</p><pre><code>div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;} div p {display:inline-block;} </code></pre><p> <a href="http://dabblet.com/gist/2867324">демо</a> здесь</p>

<p>чтобы расположить элементы блока по центру (работает в ie9 и выше), требуется оболочка <code>div</code>:</p><pre><code>.vcontainer { position: relative; top: 50%; transform: translatey(-50%); -webkit-transform: translatey(-50%); } </code></pre>

<blockquote> <p>все они должны быть вертикально выровнены внутри div</p> </blockquote><p>выравнивание <em> как </em>? вершины изображений выровнены по верху текста?</p><blockquote> <p>одно из изображений должно быть в абсолютном положении внутри div.</p> </blockquote><p>абсолютно позиционируется относительно div? возможно, вы могли бы набросать то, что вы ищете ...?</p><p> <a href="https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div#79550">описал fd</a> шаги для абсолютного позиционирования, а также для настройки отображения элемента <code>h1</code> таким образом, чтобы изображения отображались вместе с ним. к этому я добавлю, что вы можете выровнять изображения, используя стиль <code>vertical-align</code>:</p><pre><code>#header h1 { display: inline; } #header img { vertical-align: middle; } </code></pre><p>... это объединит заголовок и изображения с выровненными верхними краями. существуют другие варианты выравнивания; <a href="http://www.w3.org/tr/css2/visudet.html#propdef-vertical-align">см. документацию</a> . также может оказаться полезным удалить div и переместить изображения внутри элемента <code>h1</code> - это обеспечивает семантическое значение для контейнера и устраняет необходимость настройки отображения <code>h1</code>:</p><pre><code><h1 id=header"> <img src=".." ></img> testing... <img src="..."></img> </h1> </code></pre>

<p>используйте эту формулу, и она будет работать всегда без трещин:</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;} */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div>

<p>почти все методы должны указывать высоту, но часто у нас нет никаких высот.<br> итак, вот 3-х строчный трюк css3, который не требует знать высоту.</p><pre><code>.element { position: relative; top: 50%; transform: translatey(-50%); } </code></pre><p>это поддерживается даже в ie9.</p><p>с его префиксами поставщика:</p><pre><code>.element { position: relative; top: 50%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); } </code></pre><p>источник: <a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/">http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/</a> </p>

<p>мой трюк состоит в том, чтобы поместить в div таблицу с 1 строкой и 1 столбцом, установить 100% ширины и высоты, а также свойство vertical-align: middle.</p><pre><code><div> <table style="width:100%; height:100%;"> <tr> <td style="vertical-align:middle;"> button text </td> </tr> </table> </div> </code></pre><p>скрипка: <a href="http://jsfiddle.net/joan16v/sbqjnn9q/">http://jsfiddle.net/joan16v/sbqjnn9q/</a> </p>

<p>мы можем использовать функцию вычисления css, чтобы вычислить размер элемента, а затем соответствующим образом расположить дочерний элемент.</p><p>пример html:</p><pre><code><div class="box"> <span><a href="#">some text</a></span> </div> </code></pre><p>и css:</p><pre><code>.box { display: block; background: #60d3e8; position: relative; width: 300px; height: 200px; text-align: center; } .box span { font: bold 20px/20px 'source code pro', sans-serif; position: absolute; left: 0; right: 0; top: calc(50% - 10px); } a { color: white; text-decoration: none; } </code></pre><p>демо создано здесь: <a href="https://jsfiddle.net/xnjq1t22/">https://jsfiddle.net/xnjq1t22/</a> </p><p>это решение хорошо работает с отзывчивыми <code>div</code> <code>height</code> и <code>width</code>.</p><p>примечание. функция calc не проверяется на совместимость со старыми браузерами.</p>

<p>по умолчанию h1 является элементом блока и будет отображаться в строке после первого img, а второй img появится в строке, следующей за блоком.</p><p>чтобы это не происходило, вы можете установить h1 для поведения встроенного потока:</p><pre><code>#header > h1 { display: inline; } </code></pre><p>что касается абсолютного позиционирования img <em> внутри div </em>, вам нужно установить содержащий div в "известный размер", прежде чем это будет работать должным образом. по моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию - положение: относительный работает для меня:</p><pre><code>#header { position: relative; width: 20em; height: 20em; } #img-for-abs-positioning { position: absolute; top: 0; left: 0; } </code></pre><p>если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.</p><p><strong>обновление:</strong></p><p>вот полный пример, который работает на firefox 3:</p><pre><code><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>example of vertical positioning inside a div</title> <style type="text/css"> #header > h1 { display: inline; } #header { border: solid 1px red; position: relative; } #img-for-abs-positioning { position: absolute; bottom: -1em; right: 2em; } </style> </head> <body> <div id="header"> <img src="#" alt="image 1" width="40" height="40" /> <h1>header</h1> <img src="#" alt="image 2" width="40" height="40" id="img-for-abs-positioning" /> </div> </body> </html> </code></pre>

<p>используя css для вертикального центра, вы можете позволить внешним контейнерам действовать как таблица, а содержимое - как ячейка таблицы. в этом формате ваши объекты будут оставаться в центре. :)</p><p>в качестве примера я вложил несколько объектов в jsfiddle, но основная идея такова:</p><p><strong>html</strong></p><pre><code><div class="circle"> <div class="content"> some text </div> </div> </code></pre><p><strong>css</strong></p><pre><code> .circle { /* act as a table so we can center vertically its child */ display: table; /* set dimensions */ height: 200px; width: 200px; /* horizontal center text */ text-align: center; /* create a red circle */ border-radius: 100%; background: red; } .content { /* act as a table cell */ display: table-cell; /* and now we can vertically center! */ vertical-align: middle; /* some basic markup */ font-size: 30px; font-weight: bold; color: white; } </code></pre><p>пример нескольких объектов:</p><p><strong>html</strong></p><pre><code><div class="container"> <div class="content"> <div class="centerhoriz"> <div class="circle"> <div class="content"> some text </div><!-- content --> </div><!-- circle --> <div class="square"> <div class="content"> <div id="smallcircle"></div> </div><!-- content --> </div><!-- square --> </div><!-- center-horiz --> </div><!-- content --> </div><!-- container --> </code></pre><p><strong>css</strong></p><pre><code>.container { display: table; height: 500px; width: 300px; text-align: center; background: lightblue; } .centerhoriz { display: inline-block; } .circle { display: table; height: 200px; width: 200px; text-align: center; background: red; border-radius: 100%; margin: 10px; } .square { display: table; height: 200px; width: 200px; text-align: center; background: blue; margin: 10px; } .content { display: table-cell; vertical-align: middle; font-size: 30px; font-weight: bold; color: white; } #smallcircle { display: inline-block; height: 50px; width: 50px; background: green; border-radius: 100%; } </code></pre><p><strong> результат </strong></p><p> <a href="https://i.stack.imgur.com/p1cyh.png"><img src="https://i.stack.imgur.com/p1cyh.png" alt="result"></a> </p><p> <a href="https://jsfiddle.net/martjemeyer/ybs032uc/1/">https://jsfiddle.net/martjemeyer/ybs032uc/1/</a> </p>

<p>на сегодняшний день я нашел новый обходной путь для вертикального выравнивания нескольких текстовых строк в div с использованием css3 (и я также использую сеточную систему bootstrap v3 для украшения пользовательского интерфейса), как показано ниже:</p><pre><code>.immediate-parent-of-text-containing-div{ height: 50px; /* or any fixed height that suits you.*/ } .text-containing-div { display: inline-grid; align-items: center; text-align: center; height: 100%; } </code></pre><p>насколько я понимаю, непосредственный родительский элемент текста, содержащего элемент, должен иметь некоторую высоту. я надеюсь, что это вам тоже поможет. спасибо!</p>

<h2>есть два способа выравнивания элементов по вертикали и по горизонтали</h2><p> <a href="https://i.stack.imgur.com/mqvvh.png"><img src="https://i.stack.imgur.com/mqvvh.png" alt="enter image description here"></a> </p><h3>1. bootstrap 4.3.x</h3><p>для вертикального выравнивания: <code>d-flex align-items-center</code></p><p>для горизонтального выравнивания: <code>d-flex justify-content-center</code></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { height: 180px; width:100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex align-items-center justify-content-center bg-info container"> <div class="bg-light p-2">i am in center</div> </div></code></pre></div> </div><h3>2. css3</h3><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { display: flex; align-items: center; justify-content: center; background-color: #17a2b8; height: 180px; width:100%; } .child { background-color: #f8f9fa; padding: 0.5rem; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="child">i am in center</div> </div></code></pre></div> </div>

<p>просто используйте таблицу из одной ячейки внутри div! просто установите высоту ячейки и таблицы с 100%, и вы можете использовать выравнивание по вертикали.</p><p>стол из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместим с каменным веком!</p>

<p>это мое личное решение для элемента i внутри div</p><p> <a href="http://jsfiddle.net/3fvxa/683/">пример jsfiddle</a> </p><h2>html</h2><pre><code><div class="circle"> <i class="fa fa-plus icon"> </i></div> </code></pre><h2>css</h2><pre><code>.circle { border-radius: 50%; color: blue; background-color: red; height:100px; width:100px; text-align: center; line-height: 100px; } .icon { font-size: 50px; vertical-align: middle; } </code></pre>

<p><strong>я использую следующее решение (без позиционирования и без высоты строки), так как в течение года оно работает с ie 7 и 8.</strong></p><pre><code><style> .outer { font-size: 0; width: 400px; height: 400px; background: orange; text-align: center; display: inline-block; } .outer .emptydiv { height: 100%; background: orange; visibility: collapse; } .outer .inner { padding: 10px; background: red; font: bold 12px arial; } .verticalcenter { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; } </style> <div class="outer"> <div class="emptydiv verticalcenter"></div> <div class="inner verticalcenter"> <p>line 1</p> <p>line 2</p> </div> </div> </code></pre>