Question

我想要将两张图片与悬停效果并排放置。我设法让它们并排......但我想将图像置于徽标图像的中心。

CSS：

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

a.btn2{
display: inline-block;
width: 332px;
height: 85px;
cursor: pointer;
background-image: url(images/bttn_photographers.png);
text-indent: -9999em;
}
a.btn2:hover {
background-image: url(images/bttn_photographers_over.png);
}

}

HTML：

<body>

<div align="center">
  <p>&nbsp;</p>
  <p><img src="images/logo.gif" width="618" height="85" /></p>
</div>
<p>&nbsp;</p>
<div align="center"><a href="#" class="btn1">Models</a>


<div align="center"><a href="#" class="btn2">Photographers</a>
</div>

</div>
<p>&nbsp;</p>
</body>
</html>

Answer 1

您应该将2个图像包装在一个div中，这样您就可以将该div放在以下类

中心

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

Answer 2

实现目标的一种可能方式是遵循。

<强> 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>

<强> CSS

.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');
}

使用像align这样的属性现在不是很好的做法。对于这个问题，CSS中有解决方案。

在这种情况下，不需要使用display: inline-block和float: left，而它已经在display的一行中。

如果您想使用<p> </p>代替margin＆amp; padding，让他们回来，但更好的做法是坚持margin＆amp; padding

两个图像并排在CSS中的悬停效果

2 个答案: