对齐一行有效果且是链接的图像

Question

如何让这些图像在每个尺寸的显示器上居中对齐，无论它们显示在什么尺寸的显示器上。

我尝试过各种“

left: auto;

，

relative

，

-10%

，...

我不知道它们是否在一个容器中，如果我可以简单地将它们放入一个容器中并修复所有内容，那就太棒了。

figure.snip0015 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  max-width: 340px;
  max-height: 200px;
  background: #000000;
  text-align: center;
}


}
figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0015 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}
figure.snip0015 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: "";
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015 h5,
figure.snip0015 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
}
figure.snip0015 h5 {
  word-spacing: -0.05em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015 h5 span {
  font-weight: 800;
}
figure.snip0015 p {
  font-weight: 200;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0015:hover img {
  opacity: 0.35;
}
figure.snip0015:hover figcaption h5 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

<figure class="snip0015">
  <img src="http://open-sky.org/images/rough.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Roughnecks -</h5>
    <a href="http://www.open-sky.org/index.php/roughnecks"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/long.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Longistics -</h5>
    <a href="http://www.open-sky.org/index.php/longgistics"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/rnd.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Research & Development -</h5>
    <a href="http://www.open-sky.org/index.php/r-d"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/force.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- F.O.R.C.E. -</h5>
    <a href="http://www.open-sky.org/index.php/force"></a>
  </figcaption>
</figure>
<figure class="snip0015">
  <img src="http://open-sky.org/images/med.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Trauma -</h5>
    <a href="http://www.open-sky.org/index.php/trauma"></a>
  </figcaption>
</figure>

Answer 1

您需要将它们添加到容器中并应用自动边距。

<div class='container'>
  <figure class="snip0015">
    <img src="http://open-sky.org/images/rough.jpg" alt="sample38"/>
    <figcaption>
<p>&nbsp;</p>
        <h5>- Roughnecks -</h5>
        <a href="http://www.open-sky.org/index.php/roughnecks"></a>
    </figcaption>           
</figure>
<figure class="snip0015">
    <img src="http://open-sky.org/images/long.jpg" alt="sample38"/>
    <figcaption>
<p>&nbsp;</p>
        <h5>- Longistics -</h5>
        <a href="http://www.open-sky.org/index.php/longgistics"></a>
    </figcaption>           
</figure>
<figure class="snip0015">
    <img src="http://open-sky.org/images/rnd.jpg" alt="sample38"/>
    <figcaption>
<p>&nbsp;</p>
        <h5>- Research & Development -</h5>
        <a href="http://www.open-sky.org/index.php/r-d"></a>
    </figcaption>           
</figure>
<figure class="snip0015">
    <img src="http://open-sky.org/images/force.jpg" alt="sample38"/>
    <figcaption>
<p>&nbsp;</p>
        <h5>- F.O.R.C.E. -</h5>
        <a href="http://www.open-sky.org/index.php/force"></a>
    </figcaption>           
</figure>
<figure class="snip0015">
    <img src="http://open-sky.org/images/med.jpg" alt="sample38"/>
    <figcaption>
<p>&nbsp;</p>
        <h5>- Trauma -</h5>
        <a href="http://www.open-sky.org/index.php/trauma"></a>
    </figcaption>           
</figure>
</div>

.container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
figure.snip0015 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  max-width: 340px;
  max-height: 200px;
  background: #000000;
  text-align: center;
}


}
figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0015 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}
figure.snip0015 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: "";
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015 h5,
figure.snip0015 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
}
figure.snip0015 h5 {
  word-spacing: -0.05em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015 h5 span {
  font-weight: 800;
}
figure.snip0015 p {
  font-weight: 200;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0015:hover img {
  opacity: 0.35;
}
figure.snip0015:hover figcaption h5 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}