Как вертикально выровнять элементы в div?
https://stackoverflow.com/questions/79461
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть div с двумя изображениями и h1.Все они должны быть выровнены по вертикали внутри элемента div, рядом друг с другом.
Одно из изображений должно быть absolute расположен внутри div.
Какой CSS нужен, чтобы это работало во всех распространенных браузерах?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Решение
Ого, эта проблема популярна.Оно основано на недопонимании vertical-align свойство.Эта превосходная статья объясняет это:
Понимание vertical-align, или «Как (не) центрировать контент по вертикали» Гэвин Кистнер.
«Как центрировать в CSS» — отличный веб-инструмент, который помогает найти необходимые атрибуты центрирования CSS для различных ситуаций.
В двух словах (и чтобы предотвратить гниение ссылок):
- Встроенные элементы (и только встроенные элементы) могут быть выровнены по вертикали в их контексте с помощью
vertical-align: middle.Однако «контекст» — это не вся высота родительского контейнера, а высота текстовой строки, в которой он находится. пример jsfiddle - Для блочных элементов вертикальное выравнивание сложнее и сильно зависит от конкретной ситуации:
- Если внутренний элемент может иметь фиксированная высота, вы можете сделать свою позицию
absoluteи укажите егоheight,margin-topиtopпозиция. пример jsfiddle - Если центрированный элемент состоит из одной строки и его родительская высота фиксирована вы можете просто установить контейнер
line-heightчтобы заполнить его высоту.По моему опыту, этот метод довольно универсален. пример jsfiddle - … есть еще такие частные случаи.
- Если внутренний элемент может иметь фиксированная высота, вы можете сделать свою позицию
Другие советы
Теперь, когда поддержка 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;
}
Я использовал этот очень простой код:
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, результат не изменится.
Это сработало для меня:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
Техника от моего друга:
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;}
ДЕМО здесь
Все они должны быть выровнены по вертикали внутри элемента div.
Выровнено как?Верх изображений совмещен с верхом текста?
Одно из изображений должно иметь абсолютное позиционирование внутри элемента div.
Абсолютно позиционирован относительно DIV?Возможно, вы могли бы набросать то, что вы ищете...?
ФД описал шаги для абсолютного позиционирования, а также настройки отображения 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>
Чтобы расположить элементы блока в центре (работает в IE9 и выше), необходима оболочка div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Используйте эту формулу, и она всегда будет работать без сбоев:
#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>Почти всем методам необходимо указывать высоту, но часто у нас ее нет.
Итак, вот трехстрочный трюк CSS3, для которого не требуется знать высоту.
.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/
Мой трюк заключается в том, чтобы поместить внутрь div таблицу с 1 строкой и 1 столбцом, установить 100% ширины и высоты и свойствовертикальное выравнивание: средний.
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
По умолчанию h1 является блочным элементом и будет отображаться в строке после первого изображения, а второе изображение появится в строке, следующей за блоком.
Чтобы этого не произошло, вы можете настроить h1 на встроенное поведение потока:
#header > h1 { display: inline; }
Что касается абсолютного позиционирования img внутри div, вам нужно установить для содержащего div «известный размер», прежде чем это будет работать правильно.По моему опыту, вам также необходимо изменить атрибут позиции со значения по умолчанию — позиции:относительный работает для меня:
#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>
Используя 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 (и я также использую систему сетки начальной загрузки 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%;
}
Насколько я понимаю, непосредственный родительский элемент текстового элемента должен иметь некоторую высоту.Я надеюсь, что это поможет и вам.Спасибо!
Существует два способа выравнивания элементов по вертикали и горизонтали.
1.Бутстрап 4.3.X
для вертикального выравнивания: d-flex align-items-center
для горизонтального выравнивания: d-flex justify-content-center
.container {
height: 180px;
width:100%;
}<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>2.CSS3
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}<div class="container">
<div class="child">I am in Center</div>
</div>Просто используйте таблицу из одной ячейки внутри div!Просто установите высоту ячейки и таблицы и значение 100%, и вы сможете использовать вертикальное выравнивание.
Таблица из одной ячейки внутри div обрабатывает вертикальное выравнивание и обратно совместима с каменным веком!
Я использую следующее решение (без позиционирования и высоты строки) уже больше года, оно также работает с 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;
}
Для меня это сработало так:
<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».
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
Просто это:
<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 обрабатывает вертикальное выравнивание и обратно совместима с каменным веком!
<!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>
Вот еще один (адаптивный) подход:
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;
}
Я .NET парень, который только начал заниматься веб-программированием.CSS я не использовал (ну немного).Я использовал немного JavaScript для вертикального центрирования вместе с функцией jQuery .css.
Я просто публикую все из своего теста.Вероятно, это не слишком элегантно, но пока работает.
script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();
var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';
$(id).css({top: newTop});
}
function showAlert(){
alert("alert");
}
$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});
$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})
</script>
<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>
<body>
<div id="div1">
<div id="buttonLeft">
<button id="testerbtn">tester</button>
</div>
<div id="buttonRight"></div>
</div>
</body>
</head>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
или CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
