2016-11-28 10 views
0

Ich versuche, ein Bild zu zentrieren, aber nach einigen Versuchen konnte ich es nicht richtig arbeiten lassen. Anscheinend sind die Änderungen, die ich mache, nicht wirksam. Der Bildcode ist unterWie man ein Bild zentriert, das Bootstrap und CSS betrifft

<div class="col-md-4 col-sm-3 team-grid team-grid1 animated wow slideInUp" data-wow-delay=".5s"> 
    <img src="images/shane-de-abreu-arquetipo-shane.jpg" alt="Shane de Abreu" class="img-responsive" /> 
    <div class="p-mask"> 
     <h4>Shane de Abreu</h4> 
     <ul> 
      <li><a class="podbean" href="http://arquetiposhane.podbean.com"></a></li> 
      <li><a class="facebook" href="https://www.facebook.com/arquetiposhane"></a></li> 
      <li><a class="youtube" href="https://www.youtube.com/channel/UCj6b5dpMH0RXAEpJV6fN-bQ"></a></li> 
     </ul> 
    </div> 
</div> 

Da ich Neuling bin, weiß ich nicht, welche Datei muss ich Änderungen zu übernehmen und nach dem Element Inspektion erkannte ich, dass es zu CSS bezogen wurde (style.css) und Bootstrap (Bootstrap .css). Also habe ich versucht, diesen Dateien W3S-Code hinzuzufügen, den ich unten angegeben habe.

img { 
    display: block; 
    margin: auto; 
} 

Das Problem ist, dass ich nicht wusste, wo genau ich ihm Platz hatte, so habe ich einige Versuche, aber ich habe keinen Erfolg. Ich versuchte, die team-grid Einstellungen unter

} 
.team-grid{ 
    position:relative; 
    overflow: hidden; 
} 

Wechsel Auch versuchte durch die team-grid1 Einstellungen ändern

.team-grid1,.team-grid2{ 
    margin-bottom:20px; 
} 

auch die img Einstellungen versucht, zu ändern (style.css Datei)

img { 
    width: 100%; 
} 

und versuchte, Ändern der IMG-Einstellungen (bootstrap.css-Datei)

img { 
    vertical-align: middle; 
} 
.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    display: block; 
    max-width: 100%; 
    height: auto; 

} 

Ich weiß nicht, ob ich den W3S empfohlenen Code (Bootstrap oder Stil) platzieren sollte, denn anscheinend ist einer über den anderen, aber ich weiß nicht, welcher ist. Kann mir jemand helfen, dieses Bild zu zentrieren? Es befindet sich auf der Website www.arquetiposhane.tk.

Vielen Dank!

Antwort

1

Verwendung unter Code dies Ihre Bildmitte

.team-grid{ 
    margin: 0 auto; 
    float: none; 
} 

enter image description here

+0

Nizza machen, funktionierte gut, dank Rahul! –

+0

froh, ich könnte helfen, wenn es für Sie funktioniert, können Sie es als akzeptierte Antwort markiert – Rahul

Verwandte Themen