製作這些圖像分隔器水平

我想用可點擊的圖像做一個簡單的主頁作爲按鈕，沒問題，我可以做到這一點。但我被困在這部分：我有這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

製作這些圖像分隔器水平

回答

相關問題