在屏幕行中間設置一些圖像，同時調整窗口大小

我爲移動設備建立了一個HTML網站，所以窗口的width在每個設備上都會改變，我試圖在行 - 在標題位置，圖像之間會有一點空間，在調整窗口大小的同時，我希望這兩個圖像自動移動並保持在同一行的中間。我嘗試了一些代碼：在屏幕行中間設置一些圖像，同時調整窗口大小

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<style> 
#box { 
    width: 55%; 
    padding-left: 45%; 
} 

.imgSize { 
    width: 150px; 
    height: 150px; 
} 
</style> 

<div id="box"> 
<div id="img1"> <image src = "http://icons.iconarchive.com/icons/sniffels/christmas/256/house-icon.png" class="imgSize"></div> 
<div id="img2"> <image src ="http://icons.iconarchive.com/icons/archigraphs/collection/256/House-icon.png" class="imgSize"></div> 
</div> 

</html>

但作爲一個結果，一個圖像覆蓋等，或通過窗口覆蓋圖像...任何想法如何將它們放置在中間的一排。

來源

2013-01-12 Alex Opent

居中使用'text-aling：center;'或'margin：0 auto;'。 – Vucko

由於箱子模型的工作原理，寬度：85％和paddin-left：40％將使您的箱子寬度爲85 + 40 = 125％。我拿這個是不是打算？是[this]（http://jsfiddle.net/Z4RVX/1/）你在追求什麼？ – algoni

沒有它應該100％，修復它...仍然問題是如何讓他們留在原地而調整大小。 –

Mr.Alex ..

試試這個..

#box { 
    width: 100%; 
    text-align:center; 
    background-color:#000; 
    } 

    .imgSize { 
    width: 150px; 
    height: 150px; 
    align:center; 
    }

而且看看http://jsfiddle.net/7nJND/和（eighter HTML或JavaScript）和結果之間拖動中間。你可以看到你的圖像在中心。

祝你好運！

來源

2013-01-12 17:39:11 Venkat

謝謝Venkat ......實際上我在尋找的是水平顯示它們，問題是從垂直顯示開始，想要在水平方向上保存它們之間的空間。 –

另外，當我調整從上下瀏覽器窗口的空間絕望... –

Venkat，這完全吻合！謝謝 –

在屏幕行中間設置一些圖像，同時調整窗口大小

回答

相關問題