Html 将多个图像居中于一条线上

所以，我需要得到两张相邻但居中的图像。我要弄清楚如何使一个图像居中，而不是如何使其中两个图像居中。问题在于CSS中的

display:block，和
显示：内联块不起作用-就好像它只是内联的

将一个图像居中的我的代码：

CSS:

HTML:

本周的照片功能
将两个图像都放在一个容器中，然后像这样将容器居中放置

<div align="center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>



您几乎可以使用任何您喜欢的容器。
使用CSS


前面的答案或多或少都是正确的，一种解决方案是将图像放入容器中并将容器居中：

div {
  margin: 0 auto;
  width: 220px; 
}

这里有一把小提琴可以更好地演示：


<div align="center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>

div {
  margin: 0 auto;
  width: 220px; 
}