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 - 对齐图像

回答

相关问题