Overlay mit zentriert/vertikal ausgerichtet Nachricht
Ich würde gerne ein overlay auf meiner Seite um zu verhindern, dass Benutzer durch klicken irgendwo. Es ist manchmal ganz praktisch. In der Mitte des Overlays möchte ich um eine Meldung wie "bitte warten ..." oder "loading...".
Habe ich eine div
, die den gesamten Bildschirm erstreckt und eine Spannweite innerhalb der it, die die Nachricht enthält. Ich schaffte es Mitte der span
innerhalb der div
horizontal, aber ich habe Mühe mit der vertikalen Ausrichtung der it. Die Nachricht sollte sein, auch vertikal zentriert.
Hier ist mein code bisher:
HTML:
<div id="overlay">
<span>Please wait...</span>
</div>
CSS:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
}
Hier ist die jsfiddle.
So, wie bekomme ich den span mit der Meldung vertikal zentriert?
InformationsquelleAutor Alexxus | 2013-08-30
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie diese
DEMO
hinzufügen unten wählen in
position:relative
odertop:50%;
CSS
top: 50%;
auf diespan
aber vergessen, dieposition: relative;
. Doh! 🙂 Ich danke Ihnen sehr für Ihre Hilfe!Ich weiß, aber ich konnte nicht. Sie haben 5 Minuten zu warten, bevor eine Antwort :-/
vielen Dank und herzlich willkommen
InformationsquelleAutor Falguni Panchal
Außerdem, dass wenn der Center Objekt ist größer in Höhe & Breite, die Sie geben können negative Margen genau die Hälfte des gleichen.
span
ist ein inline-element. Sie können nicht von Dimensionen auf esja, ich meinte nur 'just in case' es ist ein inneres element mit der größeren Höhe & Breite - dann ist es die Lösung
Aber dein code funktioniert nicht. Sie haben, um es zu korrigieren. Sie können nicht
width
oderheight
auf ein span-element.ja, nur durch das hinzufügen von 'display:block', ich kann machen eine "inline-element' Aussehen 'block-level-element
InformationsquelleAutor Suraj Naik