Question

我正在尝试使用可点击的图像作为按钮创建一个简单的主页，没问题，我可以这样做。但是我被困在这个部分：我在悬停阴影的分隔线中有这4个图像。现在这些图像彼此垂直。我希望它们彼此相邻。

编辑：知道了，现在我需要它将它水平和垂直居中。

代码：

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
.imgBox 
{ 
width: 300px;
height: 600px;
display: inline-block
}

.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } 
</style>
    </head>
    <body background="back.jpg">
    <center>
    <div align="left">
    <div class="imgBox">
      <a target="_blank" href="IntensityBanner.png">
        <img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
      </a>
    </div>

    <div class="imgBox">
      <a target="_blank" href="EarningsBanner.png">
        <img src="EarningsBanner.png" alt="Forest" width="300" height="600">
      </a>
    </div>

    <div class="imgBox">
      <a target="_blank" href="img_lights.jpg">
        <img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
      </a>
    </div>

    <div class="imgBox">
      <a target="_blank" href="img_mountains.jpg">
        <img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
      </a>
    </div>
    </center>
    </div>
    </body>
    </html>

现场演示：http://twanofzo.nl/test/

Answer 1

首先，请确保关闭第一个imgBox div（第12行）或者它会给你带来麻烦。

接下来，要使它们水平显示，您应该只能将display: inline-block或float: left添加到.imgBox

的css中

使这些图像分割器水平

1 个答案: