Jak wyrównać pionowo elementy w div?
Mam div
z dwoma obrazkami i h1
. Wszystkie muszą być ustawione pionowo w div, obok siebie.
Jeden z obrazów musi być absolute
umieszczony w div
.
Jaki jest CSS potrzebny do działania na wszystkich popularnych przeglądarkach?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
28 answers
Wow, ten problem jest popularny. Opiera się na nieporozumieniu w vertical-align
nieruchomości. Ten doskonały artykuł wyjaśnia to:
"Jak wyśrodkować w CSS" jest doskonałym narzędziem internetowym, które pomaga znaleźć niezbędne atrybuty centrowania CSS dla różnych sytuacji.
W skrócie (i aby zapobiec link rot):
-
Elementy Inline (i tylko elementy inline) mogą być wyrównane pionowo w ich kontekście za pomocą
vertical-align: middle
. Jednak "kontekstem" nie jest cała wysokość kontenera nadrzędnego, ale wysokość linii tekstu, w której się znajdują. jsfiddle przykład - W przypadku elementów blokowych wyrównanie pionowe jest trudniejsze i silnie zależy od konkretnej sytuacji:
- jeśli element wewnętrzny może mieć stałą wysokość, można zrobić jego pozycję
absolute
i określić jegoheight
,margin-top
itop
pozycji. jsfiddle przykład - jeśli element środkowy składa się z jednej linii oraz jego wysokość nadrzędna jest stała możesz po prostu ustawić
line-height
, aby wypełnić jego wysokość. Ta metoda jest dość wszechstronna z mojego doświadczenia. jsfiddle przykład
... Takich szczególnych przypadków jest więcej.
- jeśli element wewnętrzny może mieć stałą wysokość, można zrobić jego pozycję
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-07 09:50:48
Teraz, gdy obsługa flexbox rośnie, CSS zastosowany do elementu zawierającego będzie pionowo wyśrodkowywał zawarty element:
.container {
display: flex;
align-items: center;
}
Użyj prefiksu wersji, jeśli chcesz również kierować Explorer 10 i stare (
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-15 17:13:52
Użyłem tego bardzo prostego kodu:
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; }
Oczywiście, niezależnie od tego, czy użyjesz .class
czy #id
, wynik nie ulegnie zmianie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-15 17:15:49
.outer {
display: flex;
align-items: center;
justify-content: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-15 17:18:48
U mnie zadziałało:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-15 17:18:02
Technika od mojego przyjaciela:
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 tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:31:01
Element wyrównujący w pionie i poziomie
Użyj jednego z nich, wynik będzie taki sam:
- Bootstrap 4
- CSS3
1. Bootstrap 4.3 +
Dla wyrównania pionowego: d-flex align-items-center
Dla wyrównania poziomego: d-flex justify-content-center
Dla pionu i poziomu 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-21 05:32:46
Aby ustawić elementy blokowe na środku (działa w IE9 i wyżej), potrzebny jest wrapper div
:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-28 20:48:50
Wszystkie z nich muszą być wyrównane pionowo w obrębie div
Wyrównane Jak ? Wierzchołki obrazów wyrównane do góry tekstu?
Jeden z obrazów musi być bezwzględnie umieszczony w div.
Absolutnie umieszczony w stosunku do DIV? Może mógłbyś naszkicować to, czego szukasz...?
Fd opisał kroki dla absolutnego pozycjonowania, a także dostosowanie wyświetlacza H1
element taki, że obrazy pojawią się w linii z nim. Do tego dodam, że możesz wyrównać obrazy za pomocą vertical-align
style:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...to by umieścić nagłówek i obrazy razem, z górnej krawędzi wyrównane. Istnieją inne opcje wyrównania; zobacz dokumentację . Możesz również uznać za korzystne upuszczenie DIV I przeniesienie obrazów wewnątrz elementu H1
- zapewnia to wartość semantyczną do kontenera i eliminuje potrzebę dostosowania wyświetlania H1
:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:27
Użyj tej formuły, a będzie działać zawsze bez pęknięć:
#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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:30:26
Prawie wszystkie metody muszą określać wysokość, ale często nie mamy żadnych wysokości.
Oto sztuczka linii CSS3 3, która nie wymaga znajomości wysokości.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Jest obsługiwana nawet w IE9.
Z przedrostkami sprzedawcy:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Źródło: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-18 10:13:26
Moja sztuczka polega na umieszczeniu wewnątrz div tabeli z 1 wierszem i 1 kolumną, Ustaw 100% szerokości i wysokości oraz właściwością vertical-align: middle.
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-14 15:26:29
#3 sposoby na wyśrodkowanie div dziecka w rodzicu div
- Metoda Pozycjonowania Bezwzględnego
- Metoda Flexbox
-
Metoda 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-29 05:46:49
Używając CSS do środka pionowego, możesz pozwolić, aby zewnętrzne kontenery działały jak Tabela, a zawartość jako komórka tabeli. W tym formacie obiekty pozostaną wyśrodkowane. :)
Zagnieżdżałem wiele obiektów w JSFiddle dla przykładu, ale podstawowa idea jest taka:
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;
}
Wiele obiektów przykład:
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%;
}
Wynik
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-06 21:57:43
Jak na dzisiaj, Znalazłem nowe obejście do pionowego wyrównywania wielu linii tekstu w div za pomocą CSS3 (i używam również systemu siatki bootstrap v3, aby upiększyć interfejs), co jest jak poniżej:
.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%;
}
Zgodnie z moim zrozumieniem, bezpośredni rodzic tekstu zawierającego element musi mieć pewną wysokość. Mam nadzieję, że tobie też pomoże. Dzięki!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-02 11:44:17
Domyślnie H1 jest elementem blokowym i będzie renderowany w linii po pierwszym img i spowoduje, że drugi img pojawi się w linii po bloku.
Aby to powstrzymać, możesz ustawić H1 tak, aby miało zachowanie przepływu w linii:
#header > h1 { display: inline; }
Jeśli chodzi o absolutnie pozycjonowanie img wewnątrz div, musisz ustawić div zawierający, aby miał "znany rozmiar", zanim to zadziała poprawnie. Z mojego doświadczenia wynika również konieczność zmiany atrybutu position z domyślna pozycja: relative działa dla mnie:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Jeśli możesz to uruchomić, możesz spróbować stopniowo usunąć atrybuty wysokości, szerokości, pozycji z div.nagłówek, aby uzyskać minimalne wymagane atrybuty, aby uzyskać pożądany efekt.
UPDATE:
Oto kompletny przykład, który działa na Firefoksie 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-18 17:28:33
Możemy użyć obliczenia funkcji CSS, aby obliczyć rozmiar elementu, a następnie odpowiednio ustawić element potomny.
Przykład HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
I 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;
}
Demo stworzone tutaj: https://jsfiddle.net/xnjq1t22/
To rozwiązanie działa dobrze z responsywnym div
height
i width
również.
Uwaga: funkcja calc nie jest testowana pod kątem zgodności ze starymi przeglądarkami.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:40:32
Moim nowym ulubionym sposobem jest użycie siatki 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-19 17:38:17
Używanie tylko klasy Bootstrap:
- div:
class="container d-flex"
- element wewnątrz 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-11 05:32:44
Wystarczy użyć tabeli jednokomórkowej wewnątrz div! Wystarczy ustawić wysokość komórki i tabeli i z do 100% i można użyć wyrównania pionowego.
Jednokomórkowy stół wewnątrz div obsługuje vertical-align i jest wstecznie kompatybilny z powrotem do epoki kamienia!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:33:05
Używając display flex, najpierw musisz owinąć pojemnik elementu / align = "left" /
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
Następnie zastosuj następujący css do wrappera div lub outdiv w moim przykładzie
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-19 11:26:39
Od ponad roku używam następującego rozwiązania (bez pozycjonowania i bez wysokości linii), działa również z IE 7 i 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-27 20:00:50
To jest moje osobiste rozwiązanie dla elementu i wewnątrz 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-16 11:45:16
Dla mnie to działało w ten sposób:
<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>
Element "a" przekształcił się w przycisk, używając klas Bootstrap i jest teraz wyśrodkowany pionowo wewnątrz zewnętrznego "div".
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:36:44
Tylko to:
<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>
Jednokomórkowy stół wewnątrz div obsługuje vertical-align i jest wstecznie kompatybilny z powrotem do epoki kamienia!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:31:59
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:34:42
Oto tylko inne (responsywne) podejście:
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:33:55
<div id="header" style="display: table-cell; vertical-align:middle;">
...
Lub CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
Zasięg Przeglądarki
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-04 20:53:44