制作这些图像分隔器水平

我想用可点击的图像做一个简单的主页作为按钮，没问题，我可以做到这一点。但我被困在这部分：我有这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/

来源

2016-02-28 Twanofzo

你可以使用'浮动：对'.imgBox' left'请不要使用'

'标记，它已被弃用。 – Aziz

首先，确保你关闭第一imgBox DIV（12号线），或者它会给你带来麻烦。

接下来，让他们水平显示，你就应该能够以添加display: inline-block或float: left你的CSS .imgBox

来源

2016-02-28 20:10:11 DROPKICK

不知何故仍然无法正常工作...请查看更新的现场演示请：/编辑：现在水平了。我如何将它居中对齐？ – Twanofzo

制作这些图像分隔器水平

回答

相关问题