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%。那你可以

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

WP：如何将两个图像居中（它们是否通过悬停效果改变）？

1 个答案: