使这些图像分隔线水平答案

【问题标题】：Making these image dividers horizontal使这些图像分隔线水平
【发布时间】：2016-02-28 20:00:20
【问题描述】：

我正在尝试用可点击的图像作为按钮制作一个简单的主页，没问题，我可以做到。但我被困在这部分：我在带有悬停阴影的分隔器中有这 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/

【问题讨论】：

您可以在.imgBox 上使用float:left，请不要使用<center> 标签，它已被弃用。

标签： html css hover divide

【解决方案1】：

首先，确保关闭第一个 imgBox div（第 12 行），否则会给您带来麻烦。

接下来，要使它们水平显示，您应该可以将display: inline-block 或float: left 添加到您的css 中以获取.imgBox

【讨论】：

不知何故仍然无法正常工作...请查看更新的现场演示：/ 编辑：现在水平了。如何将其水平和垂直居中？