CSS - 对齐图像

时间：2017-07-24 13:16:44

标签： html css css3

我正在设计一个网站，我在图标签中有一排图像。我不得不进行一些调整，现在我无法正确调整它们。这就是他们应该看的样子 -

front-end aligned

这就是他们目前的样子 -

WP version

我需要按照第一张图片对齐所有图像。无法弄清楚如何将它们包含在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>

2 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我已经增加了数字的高度，从100到120，以便能够适应第二行文本。然后我添加了vertical-align：top以便它们对齐。

答案 1 :(得分：1)

我制作了一个.agencyproducts的弹片箱，其中心对齐。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题