Ich möchte ein position: fixed;
Popup-Feld mit einer dynamischen Breite und Höhe auf dem Bildschirm zentrieren. Ich habe dafür verwendet margin: 5% auto;
. Ohne position: fixed;
es zentriert fein horizontal, aber nicht vertikal. Nach dem Hinzufügen position: fixed;
wird es sogar nicht horizontal zentriert.
Hier ist das komplette Set:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
Wie zentriere ich dieses Feld mit CSS im Bildschirm?
quelle
Hier ist ein moderner Ansatz zum horizontalen Zentrieren eines Elements mit einer dynamischen Breite - er funktioniert in allen modernen Browsern. Unterstützung kann hier gesehen werden .
Beispiel aktualisiert
Für die vertikale und horizontale Zentrierung können Sie Folgendes verwenden:
Beispiel aktualisiert
Möglicherweise möchten Sie auch weitere Eigenschaften mit Herstellerpräfix hinzufügen (siehe Beispiele).
quelle
Oder fügen Sie einfach
left: 0
undright: 0
zu Ihrem ursprünglichen CSS hinzu, wodurch es sich ähnlich wie ein reguläres nicht festes Element verhält und die übliche Technik mit automatischem Rand funktioniert:Beachten Sie, dass Sie ein gültiges (X) HTML verwenden müssen,
DOCTYPE
damit es sich im IE korrekt verhält (was Sie natürlich sowieso haben sollten ..!)quelle
right
Eigenschaft nicht berücksichtigt wird, wenn erleft
ebenfalls festgelegt ist! ( msdn.microsoft.com/en-us/library/… stellt fest, dassleft
undright
nur "teilweise" Unterstützung in IE7). OK, ich gebe zu, dass diese Lösung nicht gut ist, wenn IE7-Unterstützung wichtig ist, aber ein großartiger Trick, an den man sich für die Zukunft erinnern sollte :)Fügen Sie einen Container hinzu wie:
Dann legen Sie Ihre Box in dieses div wird die Arbeit erledigen.
quelle
display: inline-block
dies funktioniert. (Einige andere Anzeigewerte könnten auch funktionieren, wie z. B.table
)margin:auto;
und Ändern der Breite zuwidth:50%
oderwidth:400px
. dann kann der Inhalt gerader Text, Blockelemente oder Inline-Elemente sein.Einfach hinzufügen:
quelle
position: fixed
, worum es bei der Frage geht. Wenn ich falsch liege, bearbeiten Sie bitte Ihre Antwort, um ein ausführbares Code-Snippet einzuschließen.position: fixed
, vorausgesetzt dasmax-width
oderwidth
auf das Element setzen.Im Inneren kann sich jedes Element mit unterschiedlicher Breite, Höhe oder ohne befinden. alle sind zentriert.
quelle
Für diese Lösung müssen Sie keine Breite und Höhe für Ihr Popup-Div definieren.
http://jsfiddle.net/4Ly4B/33/
Und anstatt die Größe des Popups und minus die Hälfte nach oben zu berechnen, ändert Javascript die Größe des Popup-Containers, um den gesamten Bildschirm auszufüllen ...
(100% Höhe, funktioniert nicht bei Verwendung von display: table-cell; (was erforderlich ist, um etwas vertikal zu zentrieren)) ...
Wie auch immer, es funktioniert :)
quelle
Arbeitete nicht unter IE7.
Gewechselt zu
Begann zu arbeiten, aber in den anderen Browsern funktioniert es nicht mehr! So verwendet für IE7 unten
quelle
Grundsätzlich können Sie es in eine andere wickeln
div
und seine gesetztposition
zufixed
.quelle
Ich habe
vw
(Ansichtsfensterbreite) undvh
(Ansichtsfensterhöhe) verwendet. Das Ansichtsfenster ist Ihr gesamter Bildschirm.100vw
ist die Gesamtbreite Ihres Bildschirms und die100vh
Gesamthöhe.quelle
Um die Position zu fixieren, verwenden Sie Folgendes:
quelle
Eine mögliche Antwort :
quelle
Versuchen Sie dies für horizontale Elemente, die nicht richtig zentriert werden.
width: calc (width: 100% - width was auch immer sonst nicht zentriert ist )
Zum Beispiel, wenn Ihre seitliche Navigationsleiste 200px ist:
quelle
Ich benutze einfach so etwas:
Das Dialogfeld wird für mich sowohl horizontal als auch vertikal zentriert, und ich kann unterschiedliche Breite und Höhe verwenden, um unterschiedliche Bildschirmauflösungen anzupassen, damit es bei Medienabfragen reagiert.
Keine Option, wenn Sie weiterhin Unterstützung für Browser bereitstellen müssen, in denen benutzerdefinierte CSS-Eigenschaften vorhanden sind oder
calc()
die nicht unterstützt werden (überprüfen Sie caniuse).quelle
Dieser hat am besten für mich funktioniert:
quelle
Die einzige narrensichere Lösung ist die Verwendung von table align = center wie in:
Ich kann nicht glauben, dass Menschen auf der ganzen Welt diese Menge an alberner Zeit verschwenden, um ein so grundlegendes Problem wie die Zentrierung eines Div zu lösen. Die CSS-Lösung funktioniert nicht für alle Browser. Die jquery-Lösung ist eine Software-Berechnungslösung und aus anderen Gründen keine Option.
Ich habe wiederholt zu viel Zeit verschwendet, um die Verwendung von Tischen zu vermeiden, aber die Erfahrung sagt mir, dass ich aufhören soll, dagegen anzukämpfen. Verwenden Sie die Tabelle zum Zentrieren von div. Funktioniert ständig in allen Browsern! Mach dir keine Sorgen mehr.
quelle
position:fixed
.