Bild nicht horizontal nach dem Ausprobieren mehrere gemeinsame Lösungen

Es funktioniert gut auf dem Desktop, weil ich Breite: 100% verwenden. Aber auf Mobile mache ich Breite: 50% und versuche es zu zentrieren.Bild nicht horizontal nach dem Ausprobieren mehrere gemeinsame Lösungen

Ich habe versucht, den img.youtube-thumb auf margin-left zu setzen: auto; und Rand rechts: Auto; Ich habe auch versucht, das Elternelement images auf text-align zu setzen: center; und das Bild wird als Inline-Block angezeigt, und das funktioniert auch nicht.

Ich bin mir nicht sicher, was ich sonst noch versuchen sollte, da es scheint, dass jede S.O Antwort, auf die ich gestoßen bin, eine der beiden obigen Lösungen bietet.

Hier ist ein CodePen, aber ich bin mir nicht sicher, wie wertvoll es sein wird, da ich es nicht genau finden kann, ohne das gesamte Projekt in den Stift zu stecken. http://codepen.io/anon/pen/yOEQKg

Hier ist der HTML-Code für eines der Bilder:

<section class="container-fluid"> 
<div class="section group"> 
    <div class="col span_6_of_12"> 
     <div class="thumbnail project"> 
      <h3>Some title</h3> 
      <div class="youtube-container"> 
       <div class="youtube-player" data-id="ZMJP-FFzaZk"> 
       <div> 
        <img class="youtube-thumb" src="//i.ytimg.com/vi/ZMJP-FFzaZk/hqdefault.jpg"> 
        <div class="play-button"></div> 
       </div> 
       </div> 
      </div> 
      <div class="caption"> 
       <p>blablablablabla</p> 
      </div> 
     </div> 
    </div>

mein CSS-Code:

/* inside media query */ 
.youtube-player { 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    } 

/* inside media query*/ 
    img.youtube-thumb { 
    bottom: 0; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 50%; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    } 

.project { 
    text-align: center; 
} 


/* for entire site */ 
.youtube-container { 
    position: relative; 
    padding-bottom: 300px; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 

/* for entire site */ 
div { 
    text-align: left; 
} 


/* 12 Grid Column Setup??? */ 
/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
}

Quelle

2016-04-20 John Curry

Hat? Um zu erreichen, dass margin: 0 auto in Ihrem Fall funktioniert, können Sie die relative Positionierung verwenden. Forked Ihr Codepen, um Ihnen zu zeigen: http://codepen.io/abhisharma2/pen/XdYyBz – abhi

Nein, abhi, Es muss nicht absolut sein. Wenn ich Ihren Code auf die tatsächliche Website anwenden, verschwindet das Bild der Website. Ich hasse es, mobile Geräte zu testen. Auf den Testtools ist es immer anders als auf der tatsächlichen Website. –

Mist, ja ich höre dich. Wenn Sie in Chrome entwickeln, können Sie versuchen, zur mobilen Ansicht zu wechseln [https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=de]. Oder, wenn Sie irgendwie die volle Quelle teilen können, kann ich einen Blick darauf werfen und sehen, was sonst Ihr Problem verursachen könnte. – abhi

img.youtube-thumb { 
bottom: 0; 
display: inline-block; 
margin-left: auto; 
margin-right: auto; 
max-width: 50%; 
width: 50%; 
height: 100%; 
position: absolute;

}

in diese:

img.youtube-thumb { 
top: 0; 
display:block; 
left:0; 
right:0; 
margin:auto; 
max-width: 50%; 
width: 50%; 
height: 100%; 
position: absolute;

}

Hoffe, dass es Ihre Positionierung absolut sein müssen hilft

Quelle

2016-04-20 19:51:23 Raf

Bild nicht horizontal nach dem Ausprobieren mehrere gemeinsame Lösungen

Antwort

Verwandte Themen