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

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

javascript css html

Javascript 在屏幕行中间设置一些图像，同时调整窗口大小,javascript,css,html,Javascript,Css,Html,我建立了一个移动的HTML站点，所以每个设备上的窗口的宽度>代码>，我试图在标题的地方显示行中的2个图像，所以图像之间会有一个小的空间，在调整窗口大小的同时，我希望这2个图像自动移动，并在同一空间中保持行的中间位置。我尝试了一些代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style> #box {

我建立了一个移动的HTML站点，所以每个设备上的窗口的<代码>宽度>代码>，我试图在标题的地方显示行中的2个图像，所以图像之间会有一个小的空间，在调整窗口大小的同时，我希望这2个图像自动移动，并在同一空间中保持行的中间位置。我尝试了一些代码：

<!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>


#盒子{
宽度：55%；
左：45%；
}
.imgSize{
宽度：150px；
高度：150像素；
}

但结果是一个图像覆盖了另一个图像，或者图像被窗口覆盖了……有没有办法把它们放在一行的中间。

亚历克斯先生

试试这个

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

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

还可以查看并拖动中间部分（html或Javascript）和结果。您可以在中心看到您的图像

祝你好运

要居中，请使用

文本：居中或边距：0自动。根据长方体模型的工作方式，使用宽度：85%和paddin left:40%将使容器的宽度为85+40=125%。我想这不是故意的吗？这是你想要的吗？不，它应该是100%，修复了它…问题仍然是如何使它们在调整大小时保持原位。感谢Venkat…实际上我想要的是水平显示它们，从一开始它们垂直显示，希望在水平方向上节省它们之间的空间。