我正在尝试在我的页面上居中三张图片。该页面由页面左侧的固定菜单和div组成，我想在其中显示三张照片(稍后会有更多照片(，float: left CSS属性但水平居中，我的意思是照片的左侧和右侧必须是相同的空间。我希望它能做出响应。
这是我想要的：
┌───────────────────────────────────────────────────────────┐
| HEADER(The white space without anything by the moment) |
├──────────┬────────────────────────────────────────────────┤
| | DIV CONTAINER |
| | |
| | |
| | [SPACE] THE IMAGES [SPACE] |
| MENU | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
└──────────┴────────────────────────────────────────────────┘
两个空格必须相等。
我尝试了很多更改CSS以获得这种行为，但我无法得到它。我还参考了这个问题的答案：在div 内将图像在中心和中间对齐，但仍然不起作用。
这是我的实际代码：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<style type = "text/css">
body{
margin: 0;
}
#menu{
background-color: orange;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 120px;
height: 100%;
margin-top: 150px;
}
#container{
position: absolute;
left: 120px;
top: 150px;
width: 100%;
height: 100%;
text-align: center;
}
img.centeredImages{
display: inline-block;
width: 350px;
height: 200px;
float: left;
margin: auto;
}
#image1{
margin: 20px 20px;
}
#image2{
margin: 20px 10px;
}
#image3{
margin: 20px 8px;
}
</style>
</HEAD>
<BODY>
<div id = "menu">
<span class = "spanMenu"> HOME </span>
<span class = "spanMenu"> LOGS </span>
<span class = "spanMenu"> QUESTIONS </span>
</div>
<div id = "container">
<img class = "centeredImages" id = "image1" src = "https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
<img class = "centeredImages" id = "image2" src = "http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
<img class = "centeredImages" id = "image3" src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
</BODY>
</HTML>
提前感谢！
1.首先更改#container的宽度：
#container {
width: calc(100% - 120px);
}
2.之后删除图像的浮动。它们是显示的：内联块，因此它们将在一行上：
img.centeredImages {
float: none;
}
我希望这对你有帮助。
我建议使用bootstrap或foundation 5。在引导程序中：
<div class="row">
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
</div>
如果需要，您可以稍后添加XS，LG，XL。
在基础5中：
<div class="row">
<div class="medium-3 columns offset-1"><img src=""></div>
.
.
.
</div>
您还可以使用块网格，这是为像您:)这样的麻烦而设计的。
通过向所有图像添加display: inline-block，然后text-align: center到容器元素，所有图像将占用相同的空间并水平居中。
但是，由于您希望每个图像水平居中但在新行上，因此我会向图像添加display:block，以及position:relative和left: 50%。最后，我会在看起来像margin-left: -[insert half of your image width]的图像上添加一个负边距。
希望这有帮助。
您可以通过将每个图像包装在容器中来轻松实现这一点：
.image-wrapper{
width: 100%;
float: left;
}
.image-wrapper img{
width: 100%;
max-width: 350px;
max-height: 200px;
margin-bottom: 20px;
}
<div class="image-wrapper">
<image ... />
</div>
看看这个例子：
body {
margin: 0;
}
#menu {
background-color: orange;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 120px;
height: 100%;
margin-top: 150px;
}
#container {
position: absolute;
top: 150px;
left: 120px;
text-align: center;
}
.image-wrapper img {
width: 100%;
max-width: 350px;
max-height: 200px;
margin-bottom: 20px;
}
.image-wrapper:last-child img {
margin-bottom: 8px;
}
.image-wrapper {
width: 100%;
float: left;
}<div id="menu">
<span class="spanMenu"> HOME </span>
<span class="spanMenu"> LOGS </span>
<span class="spanMenu"> QUESTIONS </span>
</div>
<div id="container">
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
</div>要在同一行上对齐更多图像，请更改.image-wrapper的宽度，并查看CSS媒体查询，以便在不同的设备和屏幕尺寸上获得更好的响应结果。