在屏幕行中间设置一些图像，同时调整窗口大小

我为移动设备建立了一个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，这完全吻合！谢谢 –

在屏幕行中间设置一些图像，同时调整窗口大小

回答

相关问题