Jak wyrównać a do środka (poziomo/szerokość) strony [duplikat]
To pytanie ma już odpowiedź tutaj:
27 answers
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
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-03-07 16:48:20
position: absolute
następnie top:50%
i left:50%
umieszcza górną krawędź w pionowym środku ekranu, a lewą krawędź w poziomym środku, następnie dodając margin-top
do ujemnej wysokości div tj. e -100 przesuwa ją powyżej o 100, podobnie dla margin-left
. To dostaje div dokładnie na środku strony.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></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-08-18 14:11:27
Nowoczesny Flexbox rozwiązanie jest drogą do wejścia/od 2015 roku. justify-content: center
służy do wyrównania zawartości do środka elementu nadrzędnego.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Wyjście
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</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-07-01 21:49:30
Chcesz wyśrodkować go pionowo czy poziomo? Powiedziałeś, że podałeś
height
do 800px i chciałeś, aby div nie rozciągał się, gdywidth
jest większy niż to...-
Aby wyśrodkować poziomo, możesz użyć atrybutu
margin: auto;
w css. Należy również upewnić się, że elementybody
ihtml
nie mają marginesu ani wypełnienia:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
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-09 19:15:29
Aby działał poprawnie również w Internet Explorerze 6 musisz to zrobić w następujący sposób:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
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-08-20 19:23:55
<div></div>
div {
display: table;
margin-right: auto;
margin-left: 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
2016-02-04 12:15:48
Możesz również użyć tego w następujący sposób:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</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-03-29 22:41:23
Po prostu użyj znacznika środkowego tuż za znacznikiem body i zakończ znacznik środkowy tuż przed zakończeniem body
<body>
<center>
........your code here.....
</center>
</body>
To działało dla mnie ze wszystkimi przeglądarkami, które wypróbowałem
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-11 11:44:51
Dodaj tę klasę do div, który ma być wyśrodkowany (który powinien mieć ustawioną szerokość):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Lub dodaj rzeczy marginesu do klasy div, jak to:
.divClass
{
width:300px;
margin-right:auto;
margin-left: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
2017-03-31 13:36:07
Można to łatwo osiągnąć za pomocą flex container.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: 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
2017-08-28 18:17:16
Użyj właściwości css flex: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* centerized */
display: box;
flex-align: center;
flex-pack: center;
}
Niektóre inne wcześniejsze konfiguracje ze starszego kodu, które uniemożliwią centrowanie strony div L & R to: 1) inne klasy ukryte w zewnętrznych linkach do arkusza stylów. 2) inne klasy osadzone w czymś takim jak img(jak w przypadku starszych zewnętrznych formatów drukowania CSS). 3) kod legendy z identyfikatorami i / lub klasami będzie w konflikcie z nazwaną klasą 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
2012-05-16 17:20:32
Centrowanie bez podania szerokości div:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
To jest coś jak <center>
tag robi, z wyjątkiem:
- wszystkie bezpośrednie elementy childs inline (np.
<h1>
) z {[1] } będzie również umieszczony na środku - inline-block element może mieć różny rozmiar (comapred to
display:block
setting) zgodnie z ustawieniami 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
2016-02-04 11:53:02
body, html{
display:table;
height:100%;
width:100%;
}
.container{
display:table-cell;
vertical-align:middle;
}
.container .box{
width:100px;
height:100px;
background:red;
margin:0 auto;
}
"width:100%" dla tagu "body" to tylko na przykład. W prawdziwym projekcie możesz usunąć tę właściwość.
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-11-19 16:09:45
Jeśli masz jakąś regularną treść, a nie tylko jedną linijkę tekstu, więc jedynym możliwym powodem, który znam, jest obliczenie marginesu.
Oto przykład:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
Więc #supercontainer
jest Twoim "whole page"
A width
jest 1200px
.#middlecontainer
jest div
z treścią Twojej strony; jest width
102px
. W przypadku, gdy width
zawartości jest znana, musisz podzielić rozmiar strony na 2 i podbudować od wyniku połowę zawartości width
:
1200 / 2 - (102 / 2) = 549;
Tak, widzę również, że to jest DER GROSSE fail 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
2016-02-04 11:46:34
Użyj justify-content
i align-items
, aby wyrównać poziomo i pionowo div
Https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</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
2016-11-03 18:30:08
To działa również w IE, Auto marginesy nie.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 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
2012-04-09 20:02:04
Div wyśrodkowane pionowo i poziomo wewnątrz rodzica bez ustalania rozmiaru zawartości
Zobacz Ten przykład (kliknij) . Bardzo prosty i działa również na elastycznych wysokościach. Idealny, jeśli nie masz zadowolenia ze stałej wysokości.
I tutaj (Kliknij) jest ładny przegląd z innymi rozwiązaniami.
I tutaj (Kliknij) kolejny przykład z rozwiązaniem elastycznej szerokości ze słynnym trikiem -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
2017-05-23 12:18:25
Proste http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
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-02-04 11:47:39
Użyj poniższego kodu do wyśrodkowania pola div:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-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
2017-03-29 22:50:53
.middle {
margin: auto;
text-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
2015-06-18 17:51:30
Jeśli zawartość centrum jest głęboko wewnątrz innych div to tylko margin może cię uratować. Nic więcej. Stoję z tym zawsze, gdy nie używam frameworka takiego jak Bootstrap.
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-10-25 22:07:25
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
Jeśli chcesz zmienić pozycję pionową, zmień wartość 250 i możesz uporządkować zawartość zgodnie z potrzebami. Nie ma potrzeby podawania szerokości i innych parametró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
2017-03-29 22:49:37
W moim przypadku rozmiar ekranu telefonu jest nieznany, oto co zrobiłem.
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border:0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JS (zanim pokażesz ten DIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
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-10-21 04:02:15
<parent>
<child>
</child>
</parent>
Rodzic { pozycja: względna } dziecko { pozycja: absolutna, pozostało: 50%, transform: translateX(-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
2018-08-17 21:12:28
Dość stare pytanie z wieloma odpowiedziami, ale z jakiegoś powodu żadna z nich nie zadziałała na mnie naprawdę. To jest to, co działało dla mnie i działa również w przeglądarce:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-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
2015-10-29 08:13:23
Pobierz szerokość ekranu / align = "left" / % Ustaw margines w prawo 25% w ten sposób zawartość pojemnika będzie znajdować się pośrodku . przykład: załóżmy, że szerokość kontenera = 800px;
div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}
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-05-25 19:55:26