Jak łatwo wyśrodkować poziomo za pomocą CSS? [duplikat]
22 answers
W przypadku nie-Stała szerokość div (tzn. nie wiesz, ile miejsca zajmie div).
#wrapper {
background-color: green; /* for visualization purposes */
text-align: center;
}
#yourdiv {
background-color: red; /* for visualization purposes */
display: inline-block;
}
<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>
Należy pamiętać, że szerokość #yourdiv
jest dynamiczna - > będzie rosła i kurczyła się, aby pomieścić tekst w środku.
Możesz sprawdzić zgodność przeglądarki na Caniuse
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-04-29 00:24:07
W większości przeglądarek będzie to działać:
div.centre {
width: 200px;
display: block;
background-color: #eee;
margin-left: auto;
margin-right: auto;
}
<div class="centre">Some Text</div>
W IE6 musisz dodać kolejny zewnętrzny div
:
div.layout {
text-align: center;
}
div.centre {
text-align: left;
width: 200px;
background-color: #eee;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="layout">
<div class="centre">Some 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
2017-10-02 22:12:45
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:10:45
Tytuł pytania i treść są właściwie inne, więc zamieszczę na to dwa rozwiązania za pomocą Flexbox
.
Chyba Flexbox
zastąpi / doda do obecnego rozwiązania standardowego do czasu całkowitego zniszczenia IE8 i IE9;)
Sprawdź aktualny tabela zgodności przeglądarki dla flexbox
Pojedynczy element
.container {
display: flex;
justify-content: center;
}
<div class="container">
<img src="http://placehold.it/100x100">
</div>
Wiele elementów, ale środek tylko jeden
Default zachowanie to flex-direction: row
, które wyrównuje wszystkie elementy potomne w jednej linii. Ustawienie jej na flex-direction: column
pomoże układać linie.
.container {
display: flex;
flex-direction: column;
}
.centered {
align-self: center;
}
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div class="centered"><img src="http://placehold.it/100x100"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</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
2015-08-14 10:29:01
CSS, HTML :
div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
I am in the middle
</div>
Twój diagram pokazuje również element poziomu bloku (którym zazwyczaj jest div), a nie element w linii.
Of the top of my head, {[2] } is supported in FF2+/Safari3+ / IE7+. Można to zrobić dla IE6 za pomocą hackety CSS, lub prostego kawałka JS.
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-03-07 10:36:10
.center {
margin-left: auto;
margin-right: auto;
}
Minimalna szerokość nie jest obsługiwana globalnie, ale może być zaimplementowana za pomocą
.divclass {
min-width: 200px;
}
Następnie możesz ustawić swój div na
<div class="center divclass">stuff in 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
2011-09-04 17:10:01
Jeśli stare przeglądarki nie są problemem, użyj HTML5 / CSS3. Jeśli tak, zastosuj polyfills i nadal używaj HTML5 / CSS3. Zakładam, że Twój div nie ma tutaj marginesów ani paddingów, ale są one stosunkowo łatwe do uwzględnienia. Kod jest następujący.
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
To co robi to:
- Ustaw
div
względem kontenera; - Ustaw lewą granicę
div
na 50% szerokości kontenera w poziomie; - tłumaczyć poziomo o 50% z szerokość własna
div
.
div
będzie w końcu wyśrodkowany poziomo. Jako bonus możesz wyśrodkować w pionie BEZ dodatkowych kosztów:
.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Zaletą tego podejścia jest to, że nie musisz robić żadnych sprzecznych z intuicją rzeczy, takich jak rozważanie tekstu div, owijanie go w (często semantycznie bezużyteczny) dodatkowy kontener, lub nadanie mu stałej szerokości, co nie zawsze jest możliwe.
Nie zapomnij przedrostków dostawcy dla transform
w razie potrzeby.
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-03-02 12:53:24
Powinieneś użyć position: relative
i text-align: center
na elemencie nadrzędnym, a następnie display: inline-block
na elemencie podrzędnym, który chcesz wyśrodkować. Jest to prosty wzorzec projektowy CSS, który będzie działał we wszystkich głównych przeglądarkach. Poniżej znajduje się przykład lub zobacz przykład CodePen.
p {
text-align: left;
}
.container {
position: relative;
display: block;
text-align: center;
}
/* Style your object */
.object {
padding: 10px;
color: #ffffff;
background-color: #556270;
}
.centerthis {
display: inline-block;
}
<div class="container">
<p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>
<span class="object centerthis">Something Centered</span>
<p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</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
2015-06-13 20:59:44
Możesz użyć margin: 0 auto
na swoim css zamiast margin-left: auto; margin-right: 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
2014-09-04 10:50:18
Proszę użyć poniższego kodu Twój div będzie w środku
.class-name{
display:block;
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
2017-11-21 09:45:28
Po dziewięciu latach pomyślałem, że nadszedł czas, aby przynieść nową wersję. Oto moje dwa (a teraz jeden) ulubione.
Margines
Ustawić margin
na auto
. Powinieneś wiedzieć, że sekwencja kierunku to margin: *top* *right* *bottom* *left*;
lub margin: *top&bottom* *left&right*
aside{
display: block;
width: 50px;
height: 100px;
background-color: green;
float: left;
}
article{
height: 100px;
margin: 0 0 0 50px; /* 50px aside width */
background-color: grey;
}
div{
margin: 0 auto;
display:block;
width: 60px;
height: 60px;
background-color: blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
</aside>
<article>
<div>The div</div>
</article>
</body>
</html>
/ align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center /
Użyj znaczników <center></center>
jako owinięcia wokół <div></div>
.
Przykład:
aside{
display:block;
background-color:green;
width: 50px;
height: 100px;
float: left;
}
center{
display:block;
background-color:grey;
height: 100px;
margin-left: 50px; /* Width of the aside */
}
div{
display:block;
width: 60px;
height: 60px;
background-color:blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
</aside>
<article>
<center>
<div>The div</div>
</center>
</article>
</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
2018-02-11 02:17:14
Tutaj dodaję poprawną odpowiedź
Możesz użyć tego kodu i dostosować. Tutaj używam 2 blok dzieci.To powinno pokazać środek strony. Możesz użyć jednego lub wielu bloków.
<html>
<head>
<style>
#parent {
width: 100%;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="mydiv" id="parent">
<div class="child">
Block 1
</div>
<div class="child">
Block 2
</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
2015-05-07 19:12:03
.center {
height: 20px;
background-color: blue;
}
.center>div {
margin: auto;
background-color: green;
width: 200px;
}
<div class="center">
<div>You 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
2016-03-29 08:07:23
Jeśli znasz szerokość div I jest ona stała, możesz użyć następującego css:
margin-left: calc(50% - 'half-of-your-div-width');
Gdzie 'half-of-your-div-width' powinna być (oczywiście) połową szerokości twojego 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-01 12:40:08
Jeśli twoje <div>
mA position: absolute
musisz użyć width: 100%;
#parent {
width: 100%;
text-align: center;
}
#child {
display: inline-block;
}
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-04-24 20:36:58
W pliku html piszesz:
<div class="banner">
Center content
</div>
Twój plik css, który piszesz:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
Mi pasuje.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-06-23 14:56:27
Użycie margin-left: auto i margin-right: auto może nie działać w pewnych sytuacjach. Oto rozwiązanie, które zawsze będzie działać. Określa się wymaganą szerokość, a następnie ustawia lewy margines na połowę pozostałej szerokości.
<div style="width:80%; margin-left:calc(10%);">
your_html
</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-09-07 15:40:29
Dodaj tę klasę do pliku css to będzie działać idealnie kroki do wykonania:
1) Utwórz ten pierwszy
<div class="center-role-form">
<!--your div (contrent) place here-->
</div>
2) dodaj to do css
.center-role-form {
width: fit-content;
text-align: center;
margin: 1em 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-09-29 11:46:38
Najlepszą odpowiedzią na to pytanie jest użycie margin-auto
, ale aby go użyć, musisz znać width
swojego div
w px
lub %
.
Kod CSS:
div{
width:30%;
margin-left:auto;
margin-right: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
2015-02-15 17:31:12
Używam znaczników Div I span wraz z właściwościami css, takimi jak block, cross-browser inline-block I text-align center, zobacz mój prosty przykład
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</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-04-20 02:28:55
Możesz użyć position: relative; a następnie ustawić lewą i górną wartość:
.cenverDiv{
position:relative;
left:30%;
top:0px;
}
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-14 11:47:02
Using jQuery:
$(document).ready(function() {
$(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(".myElement").css({
"display" : "block",
"position" : "relative",
"max-width" : "75%", // for example
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
Lub, jeśli chcesz wyśrodkować każdy element klasą".mielement": {]}
$(document).ready(function() {
$(".myElement").each(function() {
$(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(this).css({
"display" : "block",
"position" : "relative",
"max-width" : "75%",
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-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
2014-12-28 23:59:07