0
Mein Preloader-Bild befindet sich nicht innerhalb des Kreises und auf einem kleinen Bildschirm ist der Perloader nicht zentriert. Ich habe versucht, automatische Ränder neu zu berechnen, scheint nichts zu arbeiten. Wie kann ich das Bild drinnen halten, ohne mit dem Kreis zu drehen und den Preloader alle zusammen zu zentrieren?Preloader-Bildanimation nicht zentriert
#load_cover {
\t width: 100%;
\t height: 100%;
\t position: fixed;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t right: 0;
\t margin: auto;
\t text-align: center;
\t background-color: rgba(0, 0, 0);
\t z-index: 10000;
}
.loaderInner {
\t position: absolute;
\t top: 50%;
\t left: 50%;
\t margin: -50px 0px 0px -50px;
}
.logo {
\t position: absolute;
\t background-image: url("https://placeholdit.imgix.net/~text?txtsize=5&txt=40%C3%9745&w=40&h=45");
\t background-repeat: no-repeat;
\t width: 60px;
\t height: 60px;
\t top: 50%;
\t left: 50%;
\t margin: -50px 0px 0px -50px; \t
}
.loader {
\t border: 4px solid #838383;
\t border-radius: 50%;
\t border-top: 4px solid #dddddd;
\t width: 60px;
\t height: 60px;
\t -webkit-animation: spin 0.6s linear infinite;
\t animation: spin 0.6s linear infinite;
\t box-shadow: 0 0 1px #999;
\t filter: blur(0.7px);
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
\t transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
\t transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div id="load_cover">
<div class="loaderInner">
<div class="loader"></div>
<div class="logo"></div>
</div>
</div>
Ihre negativen Margen sollte die Hälfte der Höhe und Breite sein. Derzeit sind Ihre Breite und Höhe "60px" und Ihre negativen Ränder sind "-50px". Sie sollten "-30px" sein. Außerdem hat Ihr Spinner * keinen * negativen Rand, was bedeutet, dass Sie die obere linke Ecke an die Mitte ausrichten, anstatt von Mitte zu Mitte. Aber mein richtiger Vorschlag: Absolute Positionierung fallen lassen und mit Rändern fusseln: ** benutze flexbox **. – Santi