Jak poziomo wyśrodkować element
Jak mogę wyśrodkować <div>
w innym <div>
używając CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
30 answers
Możesz zastosować ten CSS do wewnętrznego <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Oczywiście nie musisz ustawiać width
na 50%
. Będzie działać Dowolna szerokość mniejsza niż <div>
. margin: 0 auto
jest tym, co robi rzeczywiste centrowanie.
Jeśli kierujesz Internet Explorer 8 (i później), może lepiej mieć to zamiast:
#inner {
display: table;
margin: 0 auto;
}
Sprawi, że element wewnętrzny będzie wyśrodkowany poziomo i działa bez ustawiania określonego width
.
Przykład pracy tutaj:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
EDIT
Z {[12] } bardzo łatwo jest stylizować div w poziomie i w pionie.
#inner {
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%;
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Aby wyrównać div w pionie, użyj właściwości 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
2021-01-23 06:05:56
Jeśli nie chcesz ustawić stałej szerokości na wewnętrznej div
możesz zrobić coś takiego:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
To sprawia, że wewnętrzny div
staje się elementem inline, który może być wyśrodkowany przez text-align
.
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-11-22 11:34:02
Najlepsze podejścia są z CSS 3 .
Model pudełka:
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Zgodnie z Twoją użytecznością możesz również korzystać z właściwości box-orient, box-flex, box-direction
.
Flex :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Czytaj więcej o centrowaniu elementów potomnych
I to wyjaśnia, dlaczego Model box jest najlepszy podejście :
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-05-15 13:38:09
Załóżmy, że Twój div ma szerokość 200 pikseli:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Upewnij się, że element nadrzędny jest umieszczony, tj. względny, stały, absolutny lub sticky.
Jeśli nie znasz szerokości div, możesz użyć transform:translateX(-50%);
zamiast ujemnego marginesu.
Https://jsfiddle.net/gjvfxxdj/
Dzięki CSS calc () kod może być jeszcze prostszy:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
Zasada jest nadal taka sama; umieść element w środku i / align = "left" /
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-05-09 14:01:55
Stworzyłem Ten przykład , aby pokazać, jak w pionie i w poziomie align
.
Kod jest w zasadzie taki:
#outer {
position: relative;
}
I...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
I pozostanie w center
, nawet gdy zmienisz rozmiar ekranu.
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-05-11 20:07:14
Niektóre plakaty wspominały o sposobie CSS 3 do centrum za pomocą display:box
.
Ta składnia jest przestarzała i nie powinna być już używana. [Zobacz też Ten post] .
Tak dla kompletności tutaj jest najnowszy sposób na centrum w CSS 3 za pomocą elastyczny moduł układania pudełek.
Więc jeśli masz proste znaczniki typu:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
...jeśli chcesz wyśrodkować swoje elementy w polu, oto, czego potrzebujesz na elemencie nadrzędnym (.pole): {]}
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.box {
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
Jeśli potrzebujesz obsługiwać starsze przeglądarki, które używają starszej składni dla flexbox oto dobre miejsce do szukania.
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
2018-03-17 20:14:23
Jeśli nie chcesz ustawiać stałej szerokości i nie chcesz dodatkowego marginesu, dodaj display: inline-block
do swojego elementu.
Możesz użyć:
#element {
display: table;
margin: 0 auto;
}
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
2013-10-29 17:23:42
Centrowanie div o nieznanej wysokości i szerokości
Poziomo i pionowo. Współpracuje z dość nowoczesnymi przeglądarkami (Firefox,Safari / WebKit, Chrome, Internet Explorer 10, Opera itp.)
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</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-06-20 09:12:55
Ustaw width
i ustaw margin-left
i margin-right
na auto
. To jest tylko dla. Jeśli chcesz w obie strony, po prostu zrób to w obie strony. Nie bój się eksperymentować, to nie jest tak, że złamiesz cokolwiek.
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
2018-03-17 19:11:15
Nie może być wyśrodkowany, jeśli nie nadasz mu szerokości. W przeciwnym razie zajmie to domyślnie całą poziomą przestrzeń.
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-05-08 17:02:23
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: 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-05-09 14:13:30
Ostatnio musiałem wyśrodkować "Ukryty" div (tj. display:none;
), który miał w sobie złożony formularz, który musiał być wyśrodkowany na stronie. Napisałem następujący kod jQuery, aby wyświetlić ukryty div, a następnie zaktualizować zawartość CSS do automatycznie generowanej szerokości tabeli I zmienić margines, aby go wyśrodkować. (Przełącznik wyświetlania jest uruchamiany po kliknięciu na link, ale ten kod nie był konieczny do wyświetlenia.)
Uwaga: dzielę się tym kodem, ponieważ Google sprowadziło mnie na ten stos Rozwiązanie Overflow i wszystko by działało, z wyjątkiem tego, że ukryte elementy nie mają żadnej szerokości i nie można ich zmienić rozmiaru/wyśrodkować, dopóki nie zostaną wyświetlone.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</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-05-09 13:51:15
Sposób, w jaki zwykle to robię, to używanie pozycji absolutnej:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Zewnętrzny div nie potrzebuje żadnych dodatkowych właściwości, aby to działało.
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-05-31 13:19:25
Dla Firefoksa i Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Dla przeglądarek Internet Explorer, Firefox i Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
Właściwość text-align:
jest opcjonalna dla nowoczesnych przeglądarek, ale jest konieczna w trybie Internet Explorer Quirks dla obsługi starszych przeglądarek.
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
2018-03-17 19:13:38
Użycie:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</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-05-11 19:25:36
Innym rozwiązaniem bez konieczności ustawiania szerokości dla jednego z elementów jest użycie atrybutu CSS 3 transform
.
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Sztuczka polega na tym, że translateX(-50%)
ustawia #inner
element 50% na lewo od jego własnej szerokości. Możesz użyć tej samej sztuczki do wyrównania pionowego.
Oto Fiddle wyświetlanie poziomego i pionowego wyrównania.
Więcej informacji znajduje się w Mozilla Developer Network.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
2018-03-17 19:08:29
Chris Coyier, który napisał doskonały post na "Centering in the Unknown" na swoim blogu. To podsumowanie wielu rozwiązań. Zamieściłem jeden, który nie jest zamieszczony w tym pytaniu. Ma większą obsługę przeglądarki niż rozwiązanie Flexbox i nie używasz display: table;
, które mogłoby zepsuć inne rzeczy.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
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-05-11 20:11:42
Ostatnio znalazłem podejście:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Oba elementy muszą być tej samej szerokości, aby poprawnie funkcjonować.
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-05-11 19:23:09
Na przykład zobacz ten link i fragment poniżej:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
Jeśli masz dużo dzieci pod rodzicem, więc zawartość CSS musi być taka przykład na fiddle .
Zawartość HTML wygląda tak:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Zobacz ten przykład na fiddle .
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
2018-03-17 18:44:36
Centrowanie tylko poziomo
Z mojego doświadczenia wynika, że najlepszym sposobem na wyśrodkowanie pola poziomo jest zastosowanie następujących właściwości:
Pojemnik:
- powinien mieć
text-align: center;
Pole zawartości:
- powinien mieć
display: inline-block;
Demo:
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
Zobacz this Fiddle!
Centrowanie zarówno poziomo jak i pionowo
Z mojego doświadczenia wynika, że najlepszym sposobem wyśrodkowania pudełka zarówno pionowo jak i poziomo jest użycie dodatkowego pojemnika i zastosowanie następujących właściwości:
Zewnętrzny pojemnik:
- powinien mieć
display: table;
Wewnętrzny pojemnik:
- powinien mieć
display: table-cell;
- powinien mieć
vertical-align: middle;
- powinien mieć
text-align: center;
Pole zawartości:
- powinien mieć
display: inline-block;
Demo:
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Zobacz this Fiddle!
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-06-20 09:12:55
Najprostszy sposób:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</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
2018-03-17 18:51:04
Jeśli szerokość zawartości nie jest znana, można użyć następującej metody . Załóżmy, że mamy te dwa elementy:
-
.outer
-- pełna szerokość -
.inner
-- no width set (but a max-width could be specified)
Załóżmy, że obliczona szerokość elementów wynosi odpowiednio 1000 pikseli i 300 pikseli. Należy postępować w następujący sposób:
- Wrap
.inner
inside.center-helper
- Make
.center-helper
inline block; staje się taki sam rozmiar jak.inner
co czyni go 300 piksele szerokie. - Przesuń
.center-helper
o 50% w prawo w stosunku do swojego rodzica; to ustawia jego lewo na 500 pikseli wrt. Na Zewnątrz. - Przesuń
.inner
o 50% w lewo w stosunku do jego rodzica; to ustawia jego lewo na -150 pikseli wrt. Środkowy pomocnik, co oznacza, że jego lewa strona jest na 500-150 = 350 pikseli wrt. Na Zewnątrz. - Ustaw przepełnienie na
.outer
na Ukryte, aby zapobiec poziomemu pasku przewijania.
Demo:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</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
2020-05-11 20:18:00
Text-align: center
Zastosowanie text-align: center
zawartość w wierszu jest wyśrodkowana w polu wiersz. Jednak ponieważ wewnętrzny div ma domyślnie width: 100%
, musisz ustawić określoną szerokość lub użyć jednej z następujących opcji:
#inner {
display: inline-block;
}
#outer {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Margin: 0 auto
Za pomocą margin: 0 auto
jest inną opcją i jest bardziej odpowiednia dla kompatybilności starszych przeglądarek. Współpracuje z display: table
.
#inner {
display: table;
margin: 0 auto;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Flexbox
display: flex
zachowuje się jak element blokowy i rozkłada jego zawartość zgodnie z modelem flexbox. Współpracuje z justify-content: center
.
Uwaga: Flexbox jest kompatybilny z większością przeglądarek, ale nie wszystkie. Zobacz display: flex nie działa na Internet Explorer , aby uzyskać pełną i aktualną listę zgodności przeglądarek.
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Transformacja
transform: translate
umożliwia modyfikację przestrzeni współrzędnych modelu formatowania wizualnego CSS. Za jego pomocą elementy mogą być tłumaczone, obracane, skalowane i przekrzywiane. Aby wyśrodkować poziomo, wymaga position: absolute
oraz left: 50%
.
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<center>
(Deprecated)
Tag <center>
jest alternatywą HTML dla text-align: center
. Działa na starszych przeglądarkach i większości nowych, ale nie jest uważana za dobrą praktykę, ponieważ ta funkcja jest przestarzała i została usunięta ze standardów internetowych.
#inner {
display: inline-block;
}
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</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-10-05 07:10:48
Możesz zrobić coś takiego
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
To również wyrównuje #inner
w pionie. Jeśli nie chcesz, Usuń właściwości display
i vertical-align
;
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
2013-10-16 17:08:20
Oto, czego chcesz w najkrótszy sposób.
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
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
2015-11-09 03:35:03
Flex obsługuje ponad 97% przeglądarek i może być najlepszym sposobem na rozwiązanie tego typu problemów w kilku wierszach:
#outer {
display: flex;
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
2018-03-17 18:34:17
Możesz użyć display: flex
do zewnętrznego div I aby wyśrodkować poziomo musisz dodać justify-content: center
#outer{
display: flex;
justify-content: center;
}
Lub możesz odwiedzić W3Schools - CSS flex Property aby uzyskać więcej pomysłów.
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
2018-08-20 12:57:40
Ta metoda działa również dobrze:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Dla wewnętrznego <div>
jedynym warunkiem jest to, że jego height
i width
nie mogą być większe niż jego Pojemnik.
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-05-11 20:35:04
Cóż, udało mi się znaleźć rozwiązanie, które może pasować do wszystkich sytuacji, ale używa JavaScript:
Oto struktura:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
A oto fragment JavaScript:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Jeśli chcesz użyć go w podejściu responsywnym, możesz dodać:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
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
2018-03-17 18:47:53
Istnieje jedna opcja, którą znalazłem:
Wszyscy mówią, żeby używać:
margin: auto 0;
Ale jest inna opcja. Ustaw tę właściwość dla rodzica div. Informatyka
działa idealnie w każdej chwili:
text-align: center;
/ Align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center /
I wreszcie CSS dla Ciebie:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}
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
2018-03-17 18:38:49