Html 如何将图像居中和左对齐？

我正在处理一个图像库，希望图像的容器在页面上完全居中，但图像是左对齐的

这是我想要的输出：

但是，当我尝试在容器（id:

库

）上执行

文本对齐：居中

时，我得到的图像如下所示：

我在前面的堆栈溢出问题上尝试了以下方法：将图像包装到另一个div中，然后将其与

display:inline block对齐和
文本对齐：左但图像似乎在整个页面上左对齐：


我能做些什么来完成我想要的输出

HTML

 <div id="gallery">
     <div id="images">
        <div class="container">
            <a href="images/gallery/image1.jpg" data-lightbox="mygallery">
                <img src="images/gallery/image1.jpg">           
            <div class="overlay">
                <img src="images/magnify.png">
            </div>
               </a>
        </div>
        <div class="container">
            <a href="images/gallery/image2.jpg" data-lightbox="mygallery">
            <img src="images/gallery/image2.jpg">
            <div class="overlay">
                <img src="images/magnify.png">
            </div>
            </a>
          </div>
        </div>
    </div>

如何设置图像包装器的样式

.images {
    width:80%;
    margin:0 auto;
    text-align:left;
}

如何设置图像包装器的样式

.images {
    width:80%;
    margin:0 auto;
    text-align:left;
}

HTML

HTML

将您的
#图库
分区a
最大宽度
，
文本对齐：居中
，和
边距：自动
，然后将标题放在
#图库
内的另一个分区中，但在
#图像
之外。然后将
text align:left
放在
#图像上

见下例：


#图库{
文本对齐：居中；
最大宽度：420px；
保证金：自动；
}
img{
宽度：100px；
光标：指针；
}
.集装箱{
显示：内联块；
}
#图像{
文本对齐：左对齐
}

标题
将您的
#图库
分区a
最大宽度
，
文本对齐：居中
，和
边距：自动
，然后将标题放在
#图库
内的另一个分区中，但在
#图像
之外。然后将
text align:left
放在
#图像上

见下例：


#图库{
文本对齐：居中；
最大宽度：420px；
保证金：自动；
}
img{
宽度：100px；
光标：指针；
}
.集装箱{
显示：内联块；
}
#图像{
文本对齐：左对齐
}

标题
这很有效


正文{
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐内容：居中对齐；
对齐项目：居中；
}
部分{
高度：400px；
宽度：400px；
背景：灰色；
}
img{
利润率：48px；
}

这很有效


正文{
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐内容：居中对齐；
对齐项目：居中；
}
部分{
高度：400px；
宽度：400px；
背景：灰色；
}
img{
利润率：48px；
}

为
#图库
指定最大宽度并添加
页边距：自动
为
#图库
指定最大宽度并添加
页边距：自动
<h2>HEADER</h2>
<div class="container">
  <img src=""/>
  <img src=""/>
  <img src=""/>
  <img src=""/>
  <img src=""/>
  <img src=""/>
</div>

h2 {
  text-align: center;
}
.container {
  float: left;
}

img {
  border: medium solid black;
  width: 200px;
  height: 350px;
  margin: 5% 2%;
}