Html CSS中两个并排显示悬停效果的图像

我有两个图像，我想与悬停效果并排放置。我已经设法让他们并排…但我想在标志图像下的图像居中

CSS:

HTML:

您应该将两个图像包装在一个div中，这样您就可以使用以下类将该div居中

.centerDiv
{
    width: 50%;
    margin: 0 auto;
}

---

做你想做的事情的一个可能的方法是跟随

HTML

<div class="logo">
<img src="images/logo.gif" width="618" height="85" />
</div>
<div class="pictures">
    <a href="#" class="btn1">Models</a>
    <a href="#" class="btn2">Photographers</a>
</div>

现在，使用像

align

这样的属性并不好。对于这个问题，CSS中有一个解决方案

在这种情况下，不需要使用

display:inline block

和

float:left

，而它已经与

display

在一行中

如果你想用

代替
边距
和
填充
，那就把它们放回去，但更好的做法是坚持
边距
和
填充

.centerDiv
{
    width: 50%;
    margin: 0 auto;
}

<div class="logo">
<img src="images/logo.gif" width="618" height="85" />
</div>
<div class="pictures">
    <a href="#" class="btn1">Models</a>
    <a href="#" class="btn2">Photographers</a>
</div>

.logo {
    text-align: center;
}
.pictures {
    text-align: center;
}
.pictures a {
    cursor: pointer;
    display: inline-block;
    width: 332px;
    height: 85px;
    text-indent: -9999em;
}
.btn1 {
    background-image: url('images/bttn_model.png');
}
.btn1:hover {
    background-image: url('images/bttn_model_over.png');
}

.btn2{
    background-image: url('images/bttn_photographers.png');
    /* next margin-left is to fix the space between */
    /* images that because of the inline-block */
    /* margin-left: -4px; */
}
.btn2:hover {
    background-image: url('images/bttn_photographers_over.png');
}