Ich habe ein div tag mit width einstellen 800 Pixel. Wenn die Browserbreite größer ist als 800 Pixeles sollte nicht dehnen divaber es sollte es in die Mitte der Seite bringen.
So richten Sie a aus zur Mitte (horizontal/Breite) der Seite [duplicate]
Lesezeit: 5 Minuten
9286700cookie-checkSo richten Sie a aus zur Mitte (horizontal/Breite) der Seite [duplicate]
Shimmy Weitzhandler
AgileJon
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
-
Dies ist für Demozwecke korrekt, verwendet jedoch offensichtlich keine Inline-Stile im endgültigen Markup
– Gonzojäger
5. Juni 2009 um 10:36 Uhr
-
Stellen Sie nur sicher, dass Sie ‘text-align: center’ auf anwenden, sonst zentriert IE6 das div nicht. Fügen Sie dann text-align: left; zu deiner div.
– durchschn
5. Juni 2009 um 15:08 Uhr
-
Achten Sie darauf, den HTML-Modus für IE6 oder 7 zu überprüfen. Wenn Sie etwas anderes als verwenden 4.01 streng Sie können Probleme haben. Meistens funktioniert text-align so, wie avdgaag sagt.
– bartosz.r
6. Oktober 2011 um 10:05 Uhr
-
@rybo111 Dann brauchst du das nicht. Die Idee ist, dass „links“ der Standardwert für ist Textausrichtungund wenn es nicht wiederhergestellt wird, erbt das gesamte div ‘text-align: center’.
– jkdev
8. Oktober 2015 um 23:54 Uhr
-
warum verwendest du width:800px ? Funktioniert das für alle Bildschirme?
– siehz
14. Oktober 2015 um 14:25 Uhr
Summo
position: absolute und dann top:50% und left:50% platziert den oberen Rand in der vertikalen Mitte des Bildschirms und den linken Rand in der horizontalen Mitte, dann durch Hinzufügen margin-top zum Minus der Höhe des div, dh -100 verschiebt es um 100 nach oben und ähnlich für margin-left. Das bekommt die div genau in der Mitte der Seite.
#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>-
Thx, Ihre Antwort ist die einzige Cross-Browser-Lösung, sie sollte akzeptiert werden … erwähnenswert, dass es auch mit “position:relative” funktioniert, wenn Sie andere divs oben und unten haben (in diesem Fall nur “left: 50%” und “margin:0px -150px;” sind wichtig).
– Markus
22. November 2013 um 14:51 Uhr
-
position: fixed hat bei mir funktioniert und funktioniert möglicherweise am besten für alle anderen, bei denen sich das hinzugefügte div bereits in einem Baum von absoluten/relativen divs befindet.
– ʍǝɥʇɐɯ
28. Mai 2014 um 14:04 Uhr
-
Das kann auch prozentual sein.
width:90%;left:50%;margin-left:45%;– iMatoria
25. September 2015 um 3:30 Uhr
-
“position: fixed” funktioniert besser
– Alex Parij
1. Dezember 2016 um 20:48 Uhr
-
verwenden
transform: translateX(-50%)ist vielseitiger als die Verwendung einer negativen Marge, um die Breite des Div zu berücksichtigen. gleiches gilt für translateY und height– mwag
7. Dezember 2017 um 21:39 Uhr
m4n0
Flexbox Lösung ist der Weg in/ab 2015. justify-content: center wird für das übergeordnete Element verwendet, um den Inhalt an dessen Mitte auszurichten.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
Ausgabe
.container {
display: flex;
justify-content: center;
}
.center {
width: 400px;
padding: 10px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>-
Wie Sie sehen können, aktiviert es Highlights für
css– Johannchopin
17. April 2020 um 18:37 Uhr
Mohammed
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Kevin Duns
Damit es auch im Internet Explorer 6 korrekt funktioniert, müssen Sie es wie folgt tun:
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;
}
-
Oder verlassen Sie den Quicks-Modus und verwenden Sie einen strikten Modus. Dies hilft sehr, wenn Sie Funktionen wie Hover, automatische Ränder und viele andere verwenden möchten.
– bartosz.r
6. Oktober 2011 um 10:06 Uhr
Peter Mortensen
Sie können es auch so verwenden:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
-
Oder verlassen Sie den Quicks-Modus und verwenden Sie einen strikten Modus. Dies hilft sehr, wenn Sie Funktionen wie Hover, automatische Ränder und viele andere verwenden möchten.
– bartosz.r
6. Oktober 2011 um 10:06 Uhr
Div vertikal und horizontal innerhalb des übergeordneten Elements zentriert, ohne die Inhaltsgröße festzulegen
Hier auf dieser Seite ist eine schöne Übersicht mit mehreren Lösungen, zu viel Code, um ihn hier zu teilen, aber er zeigt, was möglich ist …
Mir persönlich gefällt diese Lösung mit dem berühmten Transform Translate -50% Trick am meisten. Es funktioniert gut für feste (% oder px) und undefinierte Höhe und Breite Ihres Elements.
Der Code ist so einfach wie:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Hier eine Geige das zeigt, dass es funktioniert
-
Der zweite Link ist effektiv unterbrochen (“Diese Webseite wird KOSTENLOS geparkt…”).
– Peter Mortensen
24. März 2019 um 11:07 Uhr
-
@PeterMortensen Ich habe meine Antwort verbessert, indem ich den Link durch einen neuen mit ähnlicher Lösung ersetzt und den Code zur Antwort hinzugefügt habe, um solche Probleme in Zukunft zu vermeiden (Antworten nur auf Links sind nicht gut). Auch den Link zur ersten Lösung entfernt, weil es eigentlich nicht so toll war.
– Welke
24. März 2019 um 16:19 Uhr
-
Das hat bei mir funktioniert. Es funktioniert auch, wenn Sie die Breite von div nicht in CSS angeben und wenn Sie sich entscheiden, die Breite auch in CSS anzugeben. Danke.
– Joseph
14. April 2019 um 16:12 Uhr
Sie können verwenden Flexbox bewirbt sich
display: flex;undalign-items: center; justify-content: center– Bongardabo
2. März 2021 um 16:50 Uhr