Jak wyśrodkować w poziomie element <div>
Jak mogę wyśrodkować w poziomie a <div>w innym <div>używając CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Odpowiedzi
Możesz zastosować ten CSS do wewnętrznego <div>:
#inner {
width: 50%;
margin: 0 auto;
}
Oczywiście nie musisz ustawiać opcji widthna 50%. Każda szerokość mniejsza niż zawierająca <div>będzie działać. Na margin: 0 autotym polega faktyczne centrowanie.
Jeśli celujesz w przeglądarkę Internet Explorer 8 (lub nowszą), może lepiej mieć to:
#inner {
display: table;
margin: 0 auto;
}
Spowoduje to wyśrodkowanie elementu wewnętrznego w poziomie i działa bez ustawiania określonego width.
Przykład roboczy 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>EDYTOWAĆ
Dzięki flexboxtemu bardzo łatwo jest stylizować element 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ć element div do środka w pionie, użyj właściwości align-items: center.
Jeśli nie chcesz ustawiać stałej szerokości wewnętrznej strony, divmoż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 wnętrze divstaje się elementem wbudowanym, za pomocą którego można wyśrodkować text-align.
Najlepsze podejście to CSS 3 .
Model pudełkowy:
#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>W zależności od swojej użyteczności możesz również korzystać z box-orient, box-flex, box-directionwłaściwości.
Flex :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Przeczytaj więcej o centrowaniu elementów podrzędnych
Link 2
Link 3
Link 4
I to wyjaśnia, dlaczego model pudełkowy jest najlepszym podejściem :
- Dlaczego model pudełkowy W3C jest uważany za lepszy?
Załóżmy, że Twój element div ma szerokość 200 pikseli:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Upewnij się, że element nadrzędny jest ustawiony , tj. Względny, ustalony, bezwzględny lub lepki.
Jeśli nie znasz szerokości swojego elementu div, możesz użyć transform:translateX(-50%);marginesu ujemnego zamiast.
https://jsfiddle.net/gjvfxxdj/
Dzięki CSS calc () kod może stać się jeszcze prostszy:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
Zasada jest nadal ta sama; umieść przedmiot na środku i skompensuj szerokość.
Stworzyłem ten przykład, aby pokazać, jak pionowo i poziomo 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 centernawet po zmianie rozmiaru ekranu.
Niektóre plakaty wspominały o sposobie wyśrodkowania CSS 3 przy użyciu display:box.
Ta składnia jest przestarzała i nie powinna być już używana. [Zobacz także ten post] .
Tak więc, aby uzyskać kompletność, oto najnowszy sposób na wyśrodkowanie w CSS 3 przy użyciu modułu Flexible Box Layout .
Więc jeśli masz proste znaczniki, takie jak:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... i chcesz wyśrodkować elementy w polu, oto czego potrzebujesz w elemencie nadrzędnym (.box):
.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ługi starszych przeglądarek, które używają starszej składni dla flexboksa, tutaj jest dobre miejsce do sprawdzenia.
Jeśli nie chcesz ustawiać stałej szerokości i nie chcesz dodatkowego marginesu, dodaj display: inline-blockdo swojego elementu.
Możesz użyć:
#element {
display: table;
margin: 0 auto;
}
Wyśrodkowanie elementu div o nieznanej wysokości i szerokości
W poziomie i w pionie. Działa 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>Majstrować przy tym dalej w Codepen lub w JSBin .
Ustaw widthi ustaw margin-lefti margin-rightna auto. Ale to tylko dla horyzontów . Jeśli chcesz w obie strony, po prostu zrób to w obie strony. Nie bój się eksperymentować; to nie jest tak, że cokolwiek zepsujesz.
Nie można go wyśrodkować, jeśli nie nadasz mu szerokości. W przeciwnym razie domyślnie zajmie całą poziomą przestrzeń.
Właściwość wyrównania do pól w CSS 3
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Ostatnio musiałem wyśrodkować „ukryty” element div (tj. display:none;), Który zawierał tabelową formę, która musiała być wyśrodkowana na stronie. Napisałem następujący kod jQuery, aby wyświetlić ukryty div, a następnie zaktualizowałem zawartość CSS do automatycznie wygenerowanej szerokości tabeli i zmienić margines, aby go wyśrodkować. (Przełącznik wyświetlania jest uruchamiany przez kliknięcie łącza, ale ten kod nie był konieczny do wyświetlenia).
UWAGA: udostępniam ten kod, ponieważ Google przyniósł mi to rozwiązanie Stack 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ć / 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>Sposób, w jaki zwykle to robię, polega na używaniu pozycji bezwzględnej:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Aby to zadziałało, zewnętrzny element div nie potrzebuje żadnych dodatkowych właściwości.
W przeglądarce Firefox i Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>W przypadku przeglądarki 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>Ta text-align:właściwość jest opcjonalna dla nowoczesnych przeglądarek, ale jest konieczna w trybie osobliwości programu Internet Explorer w celu obsługi starszych przeglądarek.
Posługiwać się:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>Innym rozwiązaniem bez konieczności ustawiania szerokości jednego z elementów jest użycie transformatrybutu CSS 3 .
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Sztuczka polega na tym, że translateX(-50%)ustawia #innerelement 50 procent na lewo od jego własnej szerokości. Możesz użyć tej samej sztuczki do wyrównania w pionie.
Oto skrzypce pokazujące wyrównanie w poziomie i w pionie.
Więcej informacji można znaleźć w witrynie Mozilla Developer Network .
Chris Coyier, który napisał na swoim blogu doskonały post na temat „Centering in the Unknown”. To zestawienie wielu rozwiązań. Opublikowałem taki, który nie został opublikowany w tym pytaniu. Ma większą obsługę przeglądarki niż rozwiązanie Flexbox i nie używasz tego, display: table;co 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;
}
Niedawno znalazłem podejście:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Oba elementy muszą mieć tę samą szerokość, aby działały poprawnie.
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 jednym rodzicem, więc zawartość CSS musi być taka jak na tym przykładzie na skrzypcach .
Treść 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>
Następnie zobacz ten przykład na skrzypcach .
Centrowanie tylko w poziomie
Z mojego doświadczenia wynika, że najlepszym sposobem na wyśrodkowanie prostokąta w poziomie jest zastosowanie następujących właściwości:
Pojemnik:
- powinien mieć
text-align: center;
Pole zawartości:
- powinien mieć
display: inline-block;
Próbny:
.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 też to Skrzypce !
Centrowanie w pionie i poziomie
Z mojego doświadczenia wynika, najlepszym sposobem, aby wyśrodkować pola zarówno pionowo jak i poziomo jest użycie dodatkowego pojemnika i stosować następujące właściwości:
Pojemnik zewnętrzny:
- powinien mieć
display: table;
Pojemnik wewnętrzny:
- powinien mieć
display: table-cell; - powinien mieć
vertical-align: middle; - powinien mieć
text-align: center;
Pole zawartości:
- powinien mieć
display: inline-block;
Próbny:
.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 też to Skrzypce !
Najłatwiejszy sposób:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}<div id="outer">
<div id="inner">Blabla</div>
</div>Jeśli szerokość treści jest nieznana, możesz użyć następującej metody . Załóżmy, że mamy te dwa elementy:
.outer-- pełna szerokość.inner- brak ustawionej szerokości (ale można określić maksymalną szerokość)
Załóżmy, że obliczona szerokość elementów wynosi odpowiednio 1000 pikseli i 300 pikseli. Postępować w następujący sposób:
- Zawinąć w
.innerśrodku.center-helper - Zrób
.center-helperwbudowany blok; przybiera taki sam rozmiar, jak.innerszerokość 300 pikseli. - Przesuń o
.center-helper50% w prawo względem swojego rodzica; to umieszcza jego lewą stronę na dystansie 500 pikseli. zewnętrzny. - Przesuń o
.inner50% w lewo względem swojego rodzica; to umieszcza jego lewy bok na -150 pikseli. środkowy pomocnik, co oznacza, że jego lewa strona ma wartość 500 - 150 = 350 pikseli wrt. zewnętrzny. - Ustaw przepełnienie na
.outerukryte, aby zapobiec poziomemu paskowi przewijania.
Próbny:
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>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;
}
Spowoduje to również wyrównanie w #innerpionie. Jeśli nie chcesz, usuń właściwości displayi vertical-align;
Wyrównanie tekstu: do środka
Stosowanie text-align: centerzawartości wbudowanej jest wyśrodkowane w polu wiersza. Jednak ponieważ wewnętrzny element div ma domyślnie width: 100%, musisz ustawić określoną szerokość lub użyć jednej z następujących czynności:
- display: block
- display: inline
- display: inline-block
#inner {
display: inline-block;
}
#outer {
text-align: center;
}<div id="outer">
<div id="inner">Foo foo</div>
</div>Margines: 0 auto
Używanie margin: 0 autojest inną opcją i jest bardziej odpowiednie dla kompatybilności ze starszymi przeglądarkami. Działa razem z display: table.
#inner {
display: table;
margin: 0 auto;
}<div id="outer">
<div id="inner">Foo foo</div>
</div>Flexbox
display: flexzachowuje się jak element blokowy i przedstawia swoją zawartość zgodnie z modelem flexbox. Działa z justify-content: center.
Uwaga: Flexbox jest kompatybilny z większością przeglądarek, ale nie ze wszystkimi. Zobacz display: flex nie działa w Internet Explorerze, aby uzyskać pełną i aktualną listę kompatybilności przeglądarek.
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}<div id="outer">
<div id="inner">Foo foo</div>
</div>Przekształcać
transform: translatepozwala modyfikować przestrzeń współrzędnych wizualnego modelu formatowania CSS. Za jego pomocą można przesuwać, obracać, skalować i pochylać elementy. Aby wyśrodkować w poziomie, wymagane są position: absolutei left: 50%.
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}<div id="outer">
<div id="inner">Foo foo</div>
</div><center> (Wycofane)
Tag
#inner {
display: inline-block;
}<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>Oto, czego chcesz w najkrótszy sposób.
JSFIDDLE
#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 % );
}
Flex ma ponad 97% wsparcia dla przeglądarek i może być najlepszym sposobem rozwiązania tego rodzaju problemów w kilku wierszach:
#outer {
display: flex;
justify-content: center;
}
Możesz użyć display: flexdo zewnętrznego div i do wyśrodkowania w poziomie, 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.
Ta metoda również działa dobrze:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Na wewnętrzny <div>, jedynym warunkiem jest to, że jego heightand widthnie może być większe niż te, które jego kontenera.
Cóż, udało mi się znaleźć rozwiązanie, które może pasować do wszystkich sytuacji, ale wykorzystuje 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 kodu 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 go używać w podejściu responsywnym, możesz dodać następujące elementy:
$(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);
})
});
Istniała jedna opcja, którą znalazłem:
Wszyscy mówią, aby używać:
margin: auto 0;
Ale jest inna opcja. Ustaw tę właściwość dla nadrzędnego elementu DIV. Działa idealnie w każdej chwili:
text-align: center;
I zobacz, dziecko idź do centrum.
I na koniec 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 */
}