Was ist der beste Weg, um vertikal und horizontal center ein HTML-element innerhalb des Arbeitsbereichs?
Sagen wir, ich will auf ein element platzieren, in der Mitte von meinem viewport für die Verwendung als eine popup-Meldung. Es sollte folgende Anforderungen erfüllen:
- Element bleiben sollte zentriert (horizontal und vertikal) innerhalb des Browsers, auch wenn element Größe dynamisch ändert
- Element sollte zentriert zu bleiben, wenn der browser in der Größe geändert wird
- Kein Javascript zugelassen ist
- Würde noch funktionieren IE7
Ist es ein schöner Weg, dies zu erreichen, ohne Rückgriff auf die Tabelle-basierte Lösung unten?
<table style="position:absolute;width:100%;height:100%">
<tr>
<td align="center">
<span id="centeredContent">I always remain centered</span>
</td>
</tr>
</table>
- Funktioniert diese Hilfe? stackoverflow.com/questions/9656362/...
- Möglich, Duplikat der stackoverflow.com/questions/49350/..., obwohl es keine Antwort hier.
- Es ist nur möglich, vertikal-center (ohne JavaScript), wenn Sie wissen, die Höhe von dem element, das Sie versuchen zu zentrieren. Wenn Sie nur eine einzige Zeile text können Sie die center, die auch, aber wieder, Sie hätte eine bekannte Höhe von über
line-height
.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die beste Lösung (meiner Meinung nach) ist die Verwendung von absoluter Positionierung, um den oberen linken Seite des Elements auf 50%/50%, dann schob Sie das element zurück in das Zentrum mit negativen Margen. Der einzige Nachteil ist, dass die Festlegung der Breite und Höhe des Elements. Hier ist ein Beispiel:
HTML:
CSS:
Hier ist eine Demo auf jsfiddle: http://jsfiddle.net/UGm2V/
Wenn Sie wirklich das zentrierte Inhalte zu haben, die eine dynamische Höhe, gibt es eine erweiterte Lösung. Sein Geschirr, es funktioniert nicht in älteren IE-Browser. HTML geht wie folgt:
Den outter container ist erforderlich, um decken die Breite und Höhe der Seite. Es ist ein block-element mit absoluter Positionierung.
Der innere container ist eigentlich ein Tisch! Das ist, entscheidet der
display: table
css-Eigenschaft. Der Sieg hier ist, dass Sie nicht wirklich benötigen keine HTML-Tabelle.Die #zentrierte div-Element ist das Letzte element benötigt. Noch deckt 100% der Seite Breite und Höhe, sondern etwas nach innen gesetzt, es wird zentriert sowohl horizontal als auch vertikal. Dies ist die css, die Sie benötigen, mit Erklärungen:
Und natürlich, hier ein jsfiddle Demo mit ihm zu gehen: http://jsfiddle.net/N7ZAr/3/
display: table
css-Eigenschaft ermöglicht es Ihnen, mit divs in der HTML. Ich werde Bearbeiten, die inmax-width
dann würde ich wollen, dass die Höhe zu wachsen beginnen. Ich denke, eine andere typische Anwendung wäre ein image-viewer, wo Sie wollen einfach nur die Bilder zentriert, was Größe Sie sind. So oder so denke ich, dass Sie Ihre aktualisierte Lösung ist der nächste Weg, den wir gehen, um zu bekommen. Es funktioniert und es nichttable
. Vielen Dank für Ihre Bemühungen.Wenn es eine Feste Größe element, können Sie etwas wie das hier tun:
Der trick hier ist
top:50%; left:50%;
. Kombinieren Sie es mit einemmargin-left
und einmargin-top
gleich negativ-Hälfte Ihrerwidth
undheight
, und das element wird zentriert auf der Seite.Wenn Sie nicht mit einem reset-stylesheet wie Eric Meyers CSS-reset oder normalize.css, ist es wichtig, Sie Ihre
body
zumargin:0;
für diesen trick zu arbeiten.Hier ein jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/
Live-Beispiel für eine Seite, die ich gemacht habe: http://althotels.ca/
http://milov.nl/code/css/verticalcenter.html
prüfen Sie den Quellcode
Wenn Sie nicht wissen, die Größe der zentrierte Inhalt, müssen Sie eine zwei-Schritt-Zentrierung
Beispiel hier: http://jsfiddle.net/G6fUE/
für Links/rechts Zentrierung, können Sie eine Breite für das element ein und setzen Sie den linken und rechten Rand auf "auto" stellen.
Für vertikale Zentrierung, es ist ein bisschen schwieriger. Sie können die prozentuale Höhen, aber denken Sie daran, um die Größe der Körper zu 100%, oder wird es nicht funktionieren.
Weiß nicht, ob dies funktioniert im IE7, sorry.