HTML图像垂直对齐

Question

我正在使用 HTML、CSS 和 Jquery，我用手表图像做了一个图像悬停效果，我希望能够在页面中心垂直向下添加多个图像的相同图像和效果，但它不会让我，这是有问题的网站！任何帮助都会很棒！

<div id="header">
    <h1></h1>
</div>
<div class="center12">
    <img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
    <h2>
        <a href="index.html" class="rollover">Home</a> / <a href="style.html"   class="rollover">Styles & Sizes</a> / 
        <a href="brand.html" class="rollover">Brands & Prices</a> / 
        <a href="strap.html" class="rollover">Watch Straps</a> / <a href="used.html" class="rollover">Tips on buying used</a>
    </h2>
</div>
<div class="fadehover">
    <img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>

看起来应该很简单，但行不通。

Answer 1

Instead of using jquery and two images for gray scale effect, use the following:

By adding an css you can bring the same effect using a single image(no need of jquery and hover image).

Add this css:

<pre>
img.a:hover {
    filter: url("");
   }
</pre>

and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'