У меня есть div с двумя изображениями и h1. Все они должны быть выровнены по вертикали внутри div, рядом друг с другом.
Одно из изображений должно быть absolute, расположенное в div.
Что необходимо для этого CSS для всех распространенных браузеров?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Вау, эта проблема популярна. Это основано на недоразумении в свойстве vertical-align. Эта замечательная статья объясняет это:
Понимание vertical-align или "Как (не) для вертикального центра содержимого" от Gavin Kistner.
"Как центрировать в CSS" - отличный веб-инструмент, который помогает найти необходимые атрибуты CSS-центрирования для разных ситуаций.
В двух словах (и для предотвращения гниения линии):
vertical-align: middle. Тем не менее, "контекст" - это не вся высота родительского контейнера, высота его текстовой строки. пример jsfiddleabsolute и указать его height, margin-top и top. пример jsfiddleline-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;}
DEMO здесь
Чтобы поместить элементы блока в центр (работает в IE9 и выше), требуется обертка div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Все они должны быть выровнены по вертикали в 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>
Используйте эту формулу, и она будет работать всегда без трещин:
#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 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/
Мой трюк заключается в том, чтобы поместить внутри 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>
для вертикального выравнивания: 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>По умолчанию h1 является элементом блока и будет отображаться в строке после первого img и вызовет появление второго img в строке, следующей за блоком.
Чтобы остановить это, вы можете настроить 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; }
Если вы можете заставить это работать, вам может потребоваться постепенное удаление атрибутов height, width, position из div.header, чтобы получить минимально необходимые атрибуты для получения желаемого эффекта.
UPDATE:
Вот полный пример, который работает в 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 (и я также использую систему grid-бутстрапа 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%;
}
В соответствии с моим пониманием, непосредственный родитель текста, содержащего элемент, должен иметь некоторую высоту. Надеюсь, это вам тоже поможет. Спасибо!
Просто используйте таблицу с одной ячейкой внутри div! Просто установите высоту ячейки и таблицы и со 100%, и вы можете использовать выравнивание по вертикали.
Таблица с одной ячейкой внутри div управляет выравниванием по вертикали и обратно совместима с каменным веком!
Мой новый любимый способ сделать это с помощью сетки 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>Я использую следующее решение (без позиционирования и без высоты строки) с года, оно также работает с 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>
Это мое личное решение для элемента я внутри div
<div class="circle">
<i class="fa fa-plus icon">
</i></div>
.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;
}
Добавить стиль,
style="float: left; "
для каждого элемента внутри тега div. Поэтому каждый элемент будет выравниваться по вертикали...
Для меня это сработало так:
<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".
# 3 способа сделать дочерний центр по центру в родительском элементе
Метод Transform/Translate
/* 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>используя display flex, сначала вам нужно обернуть контейнер элемента, который вы хотите выровнять.
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
затем примените следующий CSS к оболочке div или outdiv в моем примере
.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;
}