Как вертикально выровнять элементы в div?
У меня есть div с двумя образами и h1. Все они должны быть выровнены по вертикали внутри div рядом друг с другом.
Один из изображений должен быть absolute, расположенный внутри div.
Какой CSS нужен для того, чтобы это работало во всех распространенных браузерах?
<div id = "header">
<img src = ".." ></img>
<h1>testing...</h1>
<img src = "..."></img>
</div>
Вот два простых метода центрирования элемента внутри div: по вертикали, горизонтали или по обоим направлениям (чистый CSS): stackoverflow.com/a/31977476/3597276
margin-top: auto и margin-bottom: auto (работает во многих случаях).
Ответы 28
<div id = "header" style = "display: table-cell; vertical-align:middle;">
...
или CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
Свойство vertical-align не применяется, поскольку по умолчанию div является display: block и, похоже, ничего не было сделано для его изменения.
Видимо дисплей обновили до table-cell, что заставляет vertical-align: middle; работать. Более того, он работает без необходимости использования вложенной оболочки / буфера div, и он работает как для текста, так и для изображений (или обоих), и вам не нужно изменять свойства позиции.
Этот работает. Он изменяет отображение на table-cell, которое принимает свойство vertical-align. Понятия не имею, почему люди голосуют против этого.
да, насколько я знаю, это наименее навязчивый способ центрировать что-либо по вертикали в div. +1
Хорошо, возможно, я был слишком быстр с моими выводами ... Добавление отображения: ячейка таблицы нарушает поле div, а дополнительная граница отображается за пределами div, граница в сочетании с радиусом границы отображает закругленные углы внутри div вместо внешнего
в некоторых случаях для отображения стиля может потребоваться один дополнительный внешний div: таблица
По умолчанию h1 является блочным элементом и будет отображаться в строке после первого img, и вызовет появление второго img в строке, следующей за блоком.
Чтобы этого не происходило, вы можете настроить h1 на поведение встроенного потока:
#header > h1 { display: inline; }
Что касается абсолютного позиционирования img внутри div, вам необходимо установить для содержащего его div «известный размер», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции от значения по умолчанию - position: relative работает для меня:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Если вы можете заставить это работать, вы можете попробовать постепенно удалить атрибуты высоты, ширины и положения из div.header, чтобы получить минимально необходимые атрибуты для получения желаемого эффекта.
Обновлено:
Вот полный пример, который работает в Firefox 3:
<!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>
Я должен отметить, что наличие правильного DOCTYPE иногда может сильно повлиять на то, как будет отображаться CSS, особенно в Internet Explorer. Я бы порекомендовал вам выбрать DOCTYPE, который, как известно, соответствует режиму строгих стандартов, чтобы вы могли ожидать более согласованного поведения между браузерами.
Я бы не «ожидал» какой-либо согласованности между браузерами ... единственный способ убедиться в этом - проверить: /
All of them need to be vertically aligned within the div
Выровнен как? Верх изображений выровнен по верхнему краю текста?
One of the images needs to be absolute positioned within the 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>
Вау, эта проблема популярна. Это основано на недоразумении в свойстве vertical-align. Эта отличная статья объясняет это:
Понимание vertical-align или «Как (не) центрировать контент по вертикали», автор - Гэвин Кистнер.
«Как центрировать в CSS» - отличный веб-инструмент, который помогает найти необходимые атрибуты центрирования CSS для различных ситуаций.
Вкратце (and to prevent link rot):
- Встроенные элементы (и встроенные элементы Только) могут быть выровнены по вертикали в их контексте через
vertical-align: middle. Однако «контекст» - это не вся высота родительского контейнера, это высота текстовой строки, в которой они находятся. jsfiddle пример - Для блочных элементов вертикальное выравнивание сложнее и сильно зависит от конкретной ситуации:
- Если внутренний элемент может иметь фиксированная высота, вы можете сделать его позицию
absoluteи указать ее позициюheight,margin-topиtop. jsfiddle пример - Если центрированный элемент состоит из одной строкииего родительская высота фиксирована, вы можете просто установить
line-heightконтейнера, чтобы заполнить его высоту. По моему опыту, этот метод весьма универсален. jsfiddle пример - … Есть еще такие частные случаи.
- Если внутренний элемент может иметь фиксированная высота, вы можете сделать его позицию
Проблема с «допустимыми» решениями (не с vertical-align: middle) заключается в том, что вы должны указать фиксированную высоту. Не очень возможно для Адаптивный веб-дизайн.
У меня была такая структура: <div height = "## px"> Мой текст </ div> У меня работала установка свойства lineHeight, используя то же значение, что и в свойстве высоты div: '## px' (##, потому что это значение в моем случае динамично) спасибо
Это также работает с элементами inline-block и table-cell. Если у вас возникли проблемы с этим, попробуйте настроить line-height элемента контейнера (т. Е. Контекста), поскольку он используется в вычислениях строчного поля vertical-align.
transform: translateY(-50%) (although you still have to add the prefix like webkit, mz etc). Using this instead of margin-top: -yy would be a better fit.
@DazzleR «Понимание вертикального выравнивания или« Как (не) центрировать содержимое по вертикали »предшествует последнему стандарту (скорее, его принятию) более чем на десять лет. ;-) - Я бы добавил его, но другие ответы уже включают Это.
@KonradRudolph Нельзя отрицать, что это произошло еще до моего полового созревания! :-P Просто новичкам будет намного проще, если в ответе с зеленой галочкой будет ответ с обновленными стандартами, не так ли?
Параметры, перечисленные по ссылке, не работают, если вашим внутренним элементом является изображение. jsfiddle.net/rhvqd52c
@GauravJain Конечно: сделайте inline и дайте vertical-align: middle, или же оставьте block и установите margin-top. Ваш пример смешивает подсказки выравнивания на уровне блока и на уровне строки. <img> ничем не особенный, он ведет себя как любой другой элемент.
«Как центрировать в CSS» - действительно отличный веб-инструмент. 10x
Этот инструмент (howtocenterincsss.com) довольно хорош, потому что он работал прямо из коробки. внутри мой существующий CSS! Это очень редко. Вспомните старые времена, когда вам приходилось копировать целые таблицы стилей из какого-то примера, иногда даже из примера HTML, а затем удалять и переименовывать элементы один за другим, пока это не то, что мне нужно. Не в случае с этим сайтом!
У меня сработало:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
Значит, это уже не «блочный» элемент?
Затем, если вы хотите выровнять по горизонтали с margin : 0 auto, это не сработает из-за display: table-cell.
Воспользуйтесь этой формулой, и она всегда будет работать без трещин:
#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>Я никогда не видел в css такого селектора "#outer [id]". Что это должно делать? Что, если у меня будет класс вместо идентификатора?
Методика моего друга:
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;}
ДЕМО здесь
этот метод более подробно описан здесь: css-tricks.com/centering-in-the-unknown
Я использовал этот очень простой код:
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, результат не изменится.
Вот полный пример всех девяти вариантов выравнивания (верх-середина-низ и лево-центр-право): jsfiddle.net/webMac/0swk9hk5
В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
Просто это:
<div>
<table style = "width: 100%; height: 100%">
<tr>
<td style = "width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table>
</div>
Таблица с одной ячейкой внутри div обрабатывает выравнивание по вертикали и обратно совместима с каменным веком!
Просто используйте таблицу с одной ячейкой внутри div! Просто установите высоту ячейки и таблицы и значение 100%, и вы можете использовать выравнивание по вертикали.
Таблица с одной ячейкой внутри div обрабатывает выравнивание по вертикали и обратно совместима с каменным веком!
Вот еще один (отзывчивый) подход:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type = "text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style = "height:200px; width:200px; background:#00FF00">
<div id = "style_center">+</div>
</div>
</body>
</html>
Почти все методы должны указывать высоту, но часто у нас ее нет. Итак, вот трюк с CSS3 3 строками, для которого не требуется знать высоту.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Поддерживается даже в IE9.
с префиксом поставщика:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
но, похоже, это работает только тогда, когда высота родительского элемента фиксирована. свойство 'top' с процентным значением работает только в контейнере с фиксированной высотой, верно?
Да, это работает только в некоторых случаях, позже у меня были проблемы с этими методами ... Дело в том, чтобы иметь как можно больше возможностей, и как только вам понадобится один, вы протестируете их все, пока не получите хороший, потому что все методы есть вещи, которые не работают в конкретном случае ...
Я использую следующее решение (без позиционирования и без высоты строки) уже более года, оно также работает с IE 7 и 8.
<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>
Это мое личное решение для элемента i внутри div
HTML
<div class = "circle">
<i class = "fa fa-plus icon">
</i></div>
CSS
.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;
}
Чтобы расположить элементы блока по центру (работает в IE9 и выше), нужна оболочка div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Этот метод может привести к размытию элементов из-за того, что элемент размещен на «половине пикселя». Решение для этого - установить перспективу элемента. преобразовать: перспектива (1px) translateY (-50%);
Мой трюк состоит в том, чтобы поместить в 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>
Рабочий пример: http://jsfiddle.net/joan16v/sbqjnn9q/
Кажется, это лучший способ избежать частых царапин на голове. Я все еще не понимаю, почему в CSS нет стандарта вертикального выравнивания.
Теперь, когда поддержка flexbox увеличивается, этот CSS, примененный к содержащему элементу, будет вертикально центрировать содержащийся элемент:
.container {
display: flex;
align-items: center;
}
Используйте версию с префиксом, если вам также нужно настроить таргетинг на Explorer 10 и старые (<4.4) браузеры Android:
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Хорошее решение, спасибо. Можете ли вы подсказать, как заставить flexbox отображать горизонтальную полосу прокрутки, если внутренний элемент больше контейнера? (Я пытаюсь сделать внутренний элемент масштабируемым / прокручиваемым внутри контейнера, как холст в PowerPoint)? Это вообще возможно?
@YazidErman это решение зависит от flexbox, поэтому нет, поддержка только IE 10 и выше или любого другого современного браузера caniuse.com/#search=flexbox Flexbox хорош там, где он поддерживается, но это не везде. Таблица отображения и ячейка таблицы, вероятно, действительно лучшее решение, контейнер просто должен быть таблицей, центрируемый элемент обернут элементом с ячейкой таблицы отображения, а затем может просто центрироваться, как указывают некоторые другие ответы здесь.
Почему мне было так сложно это найти>. <Спасибо за ответ! Могу подтвердить, что это работает для меня в сценарии, когда другой ответ не сработал.
Полезный Руководство по хитростям CSS на flexbox тогда посмотрите раздел align-items
Как раз то, что мне было нужно.
В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
хороший...........
Для меня это работало так:
<div style = "width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
<a href = "javascript:void(0)" style = "margin-left: 4px; line-height: 2" class = "btn btn-primary">Login</a>
</div>
Элемент «a» преобразован в кнопку с использованием классов Bootstrap, и теперь он центрирован по вертикали внутри внешнего «div».
Используя CSS для вертикального центра, вы можете позволить внешним контейнерам действовать как таблица, а содержимому - как ячейке таблицы. В этом формате ваши объекты останутся по центру. :)
Я вложил несколько объектов в JSFiddle для примера, но основная идея такова:
HTML
<div class = "circle">
<div class = "content">
Some text
</div>
</div>
CSS
.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;
}
Пример нескольких объектов:
HTML
<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 -->
CSS
.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%;
}
Результат
Мы можем использовать вычисление функции CSS, чтобы вычислить размер элемента, а затем соответствующим образом расположить дочерний элемент.
Пример HTML:
<div class = "box">
<span><a href = "#">Some Text</a></span>
</div>
И CSS:
.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;
}
Демо создано здесь: https://jsfiddle.net/xnjq1t22/
Это решение хорошо работает с отзывчивыми div, height и width.
Примечание. Функция calc не тестируется на совместимость со старыми браузерами.
На сегодняшний день я нашел новый обходной путь для вертикального выравнивания нескольких текстовых строк в div с использованием CSS3 (и я также использую сеточную систему bootstrap v3 для украшения пользовательского интерфейса), который выглядит следующим образом:
.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%;
}
Насколько я понимаю, непосредственный родительский элемент текста, содержащего элемент, должен иметь некоторую высоту. Надеюсь, это тебе тоже поможет. Спасибо!
Очень чистое решение. Этот мне хорошо сработал.
Выровнять элемент по вертикали и горизонтали
Используйте любой из них, результат будет таким же:
- Бутстрап 4
- CSS3
1. Bootstrap 4.3+
для вертикального выравнивания: d-flex align-items-center
для горизонтального выравнивания: d-flex justify-content-center
для вертикального и горизонтального d-flex align-items-center justify-content-center
.container {
height: 180px;
width:100%;
background-color: blueviolet;
}
.container > div {
background-color: white;
padding: 1rem;
}<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 container">
<div>I am in Center</div>
</div>2. CSS3
.container {
height: 180px;
width:100%;
background-color: blueviolet;
}
.container > div {
background-color: white;
padding: 1rem;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}<div class = "container center">
<div>I am in Center</div>
</div>Оба способа в основном одинаковы, поскольку Bootstrap использует одни и те же атрибуты flex в своих классах.
Bootstrap - это не волшебство. На него распространяются те же ограничения CSS, что и для всех. Он просто скрывает то, что делает, от средней. Пользователь.
.outer {
display: flex;
align-items: center;
justify-content: center;
}
Я думаю, что это решение является самым быстрым и простым для понимания. Возможно, это потому, что у меня не хватило терпения, чтобы разобраться в выбранном ответе. Flexbox все!
Добавление justify-content: center исправило отсутствие горизонтального центрирования.
Идеальное решение. Это должно быть сверху.
Зачем нам нужна комбинация двух стилей, чтобы вертикальное выравнивание работало на всех размерах экрана? Если я использую только display: flex и изменяю размер экрана, вертикальное выравнивание теряется, однако, если используются как display, так и align-items, оно работает.
using display flex, first you need to wrap the container of the item that you want to align.
<div class = "outdiv">
<div class = "indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
then apply the following css to wrapper div or outdiv in my example
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
Ответы только на код не приветствуются. Пожалуйста, объясните, как это решает проблему или чем это отличается от существующих ответов. Из обзора
Мой новый любимый способ сделать это - использовать сетку CSS:
/* technique */
.wrapper {
display: inline-grid;
grid-auto-flow: column;
align-items: center;
justify-content: center;
}
/* visual emphasis */
.wrapper {
border: 1px solid red;
height: 180px;
width: 400px;
}
img {
width: 100px;
height: 80px;
background: #fafafa;
}
img:nth-child(2) {
height: 120px;
}<div class = "wrapper">
<img src = "https://source.unsplash.com/random/100x80/?bear">
<img src = "https://source.unsplash.com/random/100x120/?lion">
<img src = "https://source.unsplash.com/random/100x80/?tiger">
</div># 3 способа сделать центральный дочерний div в родительском div
- Абсолютный метод позиционирования
- Метод Flexbox
Преобразовать / перевести метод
/* 1st way */
.parent1 {
background: darkcyan;
width: 200px;
height: 200px;
position: relative;
}
.child1 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
}
/* 2nd way */
.parent2 {
display: flex;
justify-content: center;
align-items: center;
background: darkcyan;
height: 200px;
width: 200px;
}
.child2 {
background: white;
height: 30px;
width: 30px;
}
/* 3rd way */
.parent3 {
position: relative;
height: 200px;
width: 200px;
background: darkcyan;
}
.child3 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class = "parent1">
<div class = "child1"></div>
</div>
<hr />
<div class = "parent2">
<div class = "child2"></div>
</div>
<hr />
<div class = "parent3">
<div class = "child3"></div>
</div>Использование только класса Bootstrap:
- div:
class = "container d-flex" - элемент внутри div:
class = "m-auto"
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin = "anonymous">
<div class = "container d-flex mt-5" style = "height:110px; background-color: #333;">
<h2 class = "m-auto"><a href = "https://hovermind.com/">H➲VER➾M⇡ND</a></h2>
</div>
Я составил список всех способов вертикального выравнивания .. Я оставлю его здесь: jsfiddle.net/techsin/FAwku/1