如何居中錨和IMG爲響應

<div class="testt"> 
     <div class="test"> 
      <img src="4.jpg"> 
      <a href="">test</a> 
     </div> 
     <div class="test"> 
      <img src="5.jpg"> 
      <a href="">test</a> 
     </div> 
     <div class="test"> 
      <img src="7.jpg"> 
      <a href="">test</a> 
     </div> 
     <div class="test"> 
      <img src="6.jpg"> 
      <a href="">test</a> 
     </div>

如果你能幫助我的照片是一個線和錨下他們很好地爲中心，還爲所有設備如何居中錨和IMG爲響應

來源

2017-03-05 Igor

第一：哪裏是你試試？，第二個用於響應圖像使用百分比的高度和寬度，以及居中的東西，你必須指定主要的div寬度，然後使用margin：0 auto讓子節點位於主div的中心。 – mohade

請附上您的樣式表 – IsuruAb

您可以使用響應display: flex;父母，並將所有內容放在一行上，給它一個相對的width，以便它與視口成比例，將text-align: center;分配給.test div以將內容居中，並給img一個max-width: 100%以便它可以與父級尺寸。

.testt { 
 
    display: flex; 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 
.test { 
 
    text-align: center; 
 
} 
 
.test img { 
 
    max-width: 100%; 
 
    display: block; 
 
}

<div class="testt"> 
 
    <div class="test"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <a href="">test</a> 
 
    </div> 
 
    <div class="test"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <a href="">test</a> 
 
    </div> 
 
    <div class="test"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <a href="">test</a> 
 
    </div> 
 
</div>

來源

2017-03-05 01:40:46

謝謝邁克爾，工作得很好。 – Igor

@Igor真棒，不客氣。歡迎來到SO btw。如果你認爲自己有幫助，一定要注意答案，一旦你覺得你的問題已經解決，一定要接受一個答案（答案中的複選標記），以便其他人不認爲它仍然是開放的，並繼續提供答案。 –

現在我有另一個問題了......我想在錨點和圖像之間留出一點空間，我嘗試使用margin-top但不工作。 – Igor

如何居中錨和IMG爲響應

回答

相關問題