CSS - 對齊圖像

我正在設計一個網站，並在圖標中有一排圖像。我不得不做出一些調整，現在我無法讓它們正確對齊。這是他們應該如何看 -CSS - 對齊圖像

這是他們目前怎麼看 -

我需要對齊按第一個圖像中的所有圖像。無法完全弄清楚如何做到這一點，因爲它們被包裹在a標籤中。下面的代碼 -

section#products { 
 
    height: 600px; 
 
    max-width: 100% 
 
} 
 

 
.agencyproducts { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.agencyproducts a { 
 
    display: inline-block; 
 
} 
 

 
.agencyproducts p { 
 
    text-align: center; 
 
    margin: 30px; 
 
} 
 

 
.agencyproducts img { 
 
    width: 80px; 
 
    height: 80px; 
 
} 
 

 
figure { 
 
    text-align: center; 
 
    max-width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    margin: 10px; 
 
    font-size: 9px; 
 
} 
 

 
figure img {} 
 

 
#products figcaption { 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
}

<section id="products"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="twelve columns agencyproducts"> 
 
     <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p> 
 
     <a href="http://localhost:8888/agency/2k4k-production/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production"> 
 
      <figcaption>2K/4K PRODUCTION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/post-production/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production"> 
 
      <figcaption>POST PRODUCTION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/2d3d-animation/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation"> 
 
      <figcaption>2D/3D ANIMATION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/adhoc/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC"> 
 
      <figcaption>ADHOC</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/interactive/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive"> 
 
      <figcaption>INTERACTIVE & PERSONALISED</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/tv-adverts/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS"> 
 
      <figcaption>TV ADVERTS</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/360-video/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR"> 
 
      <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption> 
 
      </figure> 
 
     </a> 
 
     </div> 
 
    </div>

來源

2017-07-24 Mike.Whitehead

我製作了一個在中心對齊的.agencyproducts flexbox。

section#products { 
 
    height: 600px; 
 
    max-width: 100% 
 
} 
 

 
.agencyproducts { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.agencyproducts a { 
 
    display: inline-block; 
 
} 
 

 
.agencyproducts p { 
 
    text-align: center; 
 
    margin: 30px; 
 
    width: 100%; 
 
} 
 

 
.agencyproducts img { 
 
    width: 80px; 
 
    height: 80px; 
 
} 
 

 
figure { 
 
    text-align: center; 
 
    max-width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    margin: 10px; 
 
    font-size: 9px; 
 
} 
 

 
figure img {} 
 

 
#products figcaption { 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
}

<section id="products"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="twelve columns agencyproducts"> 
 
     <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p> 
 
     <a href="http://localhost:8888/agency/2k4k-production/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="Production"> 
 
      <figcaption>2K/4K PRODUCTION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/post-production/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="Post-Production"> 
 
      <figcaption>POST PRODUCTION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/2d3d-animation/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="Animation"> 
 
      <figcaption>2D/3D ANIMATION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/adhoc/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="ADHOC"> 
 
      <figcaption>ADHOC</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/interactive/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="Interactive"> 
 
      <figcaption>INTERACTIVE & PERSONALISED</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/tv-adverts/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="TV ADVERTS"> 
 
      <figcaption>TV ADVERTS</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/360-video/"> 
 
      <figure> 
 
      <img src="http://placehold.it/100/ff0000" alt="360 Video and VR"> 
 
      <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption> 
 
      </figure> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2017-07-24 13:27:03 Gerard

還沒有在我的網站工作。 –

section#products { 
 
    height: 600px; 
 
    max-width: 100% 
 
} 
 

 
.agencyproducts { 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: top; 
 
} 
 

 
.agencyproducts a { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.agencyproducts p { 
 
    text-align: center; 
 
    margin: 30px; 
 
} 
 

 
.agencyproducts img { 
 
    width: 80px; 
 
    height: 80px; 
 
} 
 

 
figure { 
 
    text-align: center; 
 
    max-width: 100px; 
 
    height: 120px; 
 
    vertical-align: top; 
 
    margin: 10px; 
 
    font-size: 9px; 
 
} 
 

 
figure img {} 
 

 
#products figcaption { 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
}

<section id="products"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="twelve columns agencyproducts"> 
 
     <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p> 
 
     <a href="http://localhost:8888/agency/2k4k-production/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production"> 
 
      <figcaption>2K/4K PRODUCTION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/post-production/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production"> 
 
      <figcaption>POST PRODUCTION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/2d3d-animation/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation"> 
 
      <figcaption>2D/3D ANIMATION</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/adhoc/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC"> 
 
      <figcaption>ADHOC</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/interactive/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive"> 
 
      <figcaption>INTERACTIVE & PERSONALISED</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/tv-adverts/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS"> 
 
      <figcaption>TV ADVERTS</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="http://localhost:8888/agency/360-video/"> 
 
      <figure> 
 
      <img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR"> 
 
      <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption> 
 
      </figure> 
 
     </a> 
 
     </div> 
 
    </div>

我增加了faigures的高度，從100到120，以便能夠適應文本的第二行。然後，我添加了vertical-align：top，以便它們對齊。

來源

2017-07-24 13:22:07 Salketer

CSS - 對齊圖像

回答

相關問題