Set reaktionsschnell Bild in der Mitte der Seite über der Tabelle cross-line

#logo-center {
    max-width: 100%%;
    height: auto;
    display: flex;
}

@media only screen and (min-width:991px) {
    .logo-div {
        -webkit-margin-start: -5%%;
        -webkit-margin-end: -15%%;
        -webkit-margin-before: -6%%;
        left: 40%%;
        top: 40%%;
        right: 40%%;
        position: absolute;
        z-index: 100;
        display: flex;
    }
}

@media only screen and (max-width:990px) {
    .logo-div {
        -webkit-margin-start: -5%%;
        -webkit-margin-end: -15%%;
        -webkit-margin-before: -6%%;
        left: 40%%;
        top: 42%%;
        right: 42%%;
        position: absolute;
        z-index: 100;
    }
}

@media only screen and (max-width:700px) {
    .logo-div {
        left: 38%%;
        top: 43%%;
        right: 40%%;
        position: absolute;
        z-index: 100;
    }
}

@media only screen and (max-width:500px) {
    .logo-div {
        left: 35%%;
        top: 42%%;
        right: 40%%;
        position: absolute;
        z-index: 100;
    }
}
<div class="logo-div">
            <div id="logo-center"><img style="border-radius: 7%%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
        </div>

https://jsfiddle.net/8rmL5a7f/ Ich brauche, um die Größe Bild in der Mitte (so schnell bei mozilla/chrome/ie)), und legen Sie es in der Mitte der Seite zu decken, das Kreuz, an dem die Tabelle Grenze erfüllt. Mein code funktioniert nur auf firefox, aber nicht im chrome oder IE. Jemand kann mir helfen, zu wissen, warum?

+1
2019-09-19 18:06:53
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an