html - 白皮书 : How to center two images (they change by hover effect)?

Question

我显示一个图像，如果鼠标悬停在它上面(悬停)，该图像会随着另一个图像而变化。这非常有效，但图像不居中。这是我使用的代码:

HTML:

<figure><a><img class="hover" src="nachher.jpg" alt="" width="60%" />
<img class="nohover" src="vorher.jpg" alt="" width="60%/" /></a>
<figcaption>some text here</figcaption></figure

CSS:

img.nohover {border:0;} 
img.hover {border:0;display:none;} 
a:hover img.hover {display:inline;} 
a:hover img.nohover {display:none;}

问题是:如何让图像居中？

Answer 1

我会将 width: 60% 移动到 figure，然后使图像 width: 100%。然后你可以

img.nohover {border:0;} 
img.hover {border:0;display:none;} 
a:hover img.hover {display:inline;} 
a:hover img.nohover {display:none;}
figure {
  width: 60%;
  margin: auto;
}
img {
  width: 100%;
}

<figure>
  <a><img class="hover" src="/image/2C22p.jpg" alt="" />
    <img class="nohover" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" /></a>
  <figcaption>some text here</figcaption>
</figure>

在 figure 上使用 margin: auto 使其水平居中。