Ich habe eine div Tag mit width eingestellt auf 800 Pixel . Wenn die Browserbreite größer ist als 800 Pixel sollte es nicht zu einer Überdehnung der div aber es sollte in die Mitte der Seite gebracht werden.
Diese Frage hat bereits Antworten:
- Wie man ein Element horizontal zentriert (128 Antworten )
Antworten
Zu viele Anzeigen?
Summo
Punkte
3385
position: absolute und dann top:50% y left:50% die obere Kante in der vertikalen Mitte des Bildschirms und die linke Kante in der horizontalen Mitte platziert, dann durch Hinzufügen von margin-top zum Negativ der Höhe des div, d.h. -100 verschiebt es um 100 nach oben und ähnlich für margin-left . Dadurch wird 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>
m4n0
Punkte
27203
Flexbox Lösung ist der richtige Weg für das Jahr 2015. justify-content: center wird für das übergeordnete Element verwendet, um den Inhalt in der Mitte des Elements 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>
Mohammad
Punkte
589
Tomas Aschan
Punkte
55585
-
Meinen Sie, dass Sie es vertikal oder horizontal zentrieren möchten? Sie sagten, Sie haben die
heightauf 800 Pixel und wollte, dass das Div nicht gestreckt wird, wenn diewidthwar größer als das... -
Um horizontal zu zentrieren, können Sie die
margin: auto;Attribut in CSS. Außerdem müssen Sie darauf achten, dass dasbodyyhtmlElemente haben keinen Rand und keine Füllung:html, body { margin: 0; padding: 0; }
centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
- See previous answers
- Weitere Antworten anzeigen
