Html 如何将整个图像居中，并将其中的图像左对齐？

我在一个网站上有一个图片库。 我想将图像库居中，所以我在其中添加了“文本对齐：居中”。 它工作得很好，但我想要的是将整个图像库放在页面的中心，并且仍然将其中的图像左对齐。 我该怎么做

HTML

---

试试这个

添加

文本对齐：左到此选择器
.img1、.img2、.img3

同时

article img {
  width: 100%;
  max-width: 150px;
}

在您的工作中，您添加了
wisth:100%至
img
。请删除此项或添加
最大宽度：150px

像这样

article img {
  width: 100%;
  max-width: 150px;
}


部分{
页边距顶部：100px；/*上方顶部导航之间的间隙*/
文本对齐：居中；
}
.img1，
.img2，
.img3{
显示：内联块；
垂直对齐：顶部；
宽度：250px；
高度：自动；
左缘0.1%；
填充：0；
文本对齐：左对齐；
}
第条img{
宽度：100%；
最大宽度：150px；
身高：100%；
保证金：0；
填充：0；
}
第dl条{
显示：块；
宽度：100%；
边缘顶部：10px；
文本对齐：左对齐；
}
第dt条{
字号：0.9em；
字体大小：400；
}
第dd条{
左边距：0；
字号：0.9em；
字体大小：300；
}

图像描述
图像描述
图像描述
您必须将库与父元素对齐，并将图像与库元素对齐。我不知道gallery的父元素是什么，所以我用class image container创建了一个div。请参阅下面plunkr中的我的解决方案

编辑：更新CSS以使用flex box代替文本对齐。有关更多信息，请参见CSS中的注释


.image容器{
/*这是整个画廊的中心*/
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
部分{
背景色：浅灰色；/*只是为了更好地显示元素的位置*/
边缘顶部：100px；
宽度：350px；/*此选项控制您想要的库宽度*/
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
柔性包装：包装；
}
章节>文章{
背景：darkgrey；/*只是为了更好地显示元素的位置*/
边缘底部：10px；
显示：内联块；
垂直对齐：顶部；
宽度：48%；/*此选项控制一行可以容纳多少项*/
高度：自动；
填充：0；
}
章节>文章>a{
宽度：100%；
display:inline block；/*这是为了使文章正确地包装内容*/
}
第条img{
宽度：100%；
高度：自动；
保证金：0；
填充：0；
}
第dl条{
显示：块；
宽度：100%；
边缘顶部：10px；
文本对齐：左对齐；
}
第dt条{
字号：0.9em；
字体大小：400；
}
第dd条{
左边距：0；
字号：0.9em；
字体大小：300；
}

图像描述
图像描述
图像描述
您需要使用
边距：auto
将
最大宽度设置为
部分
，以使整个部分在页面上居中，然后应用
文本对齐：左
将内部内联元素向左对齐

还有，如果所有人都使用相同的css，为什么要在css中使用
.img1、.img2、.img3
…在
部分添加一个自定义类
，并像
.gallery文章
一样只使用一次，或者在所有
文章中使用相同的类


堆栈片段


section.gallery{
宽度：80%；
文本对齐：左对齐；
背景：灰色；
裕度：100px自动0；
}
.画廊文章{
显示：内联块；
垂直对齐：顶部；
宽度：200px；
高度：自动；
左缘0.1%；
填充：0；
文本对齐：左对齐；
}
.画廊文章{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.画廊文章dl{
显示：块；
宽度：100%；
边缘顶部：10px；
文本对齐：左对齐；
}
.画廊文章dt{
字号：0.9em；
字体大小：400；
}
.画廊文章dd{
左边距：0；
字号：0.9em；
字体大小：300；
}

图像描述
图像描述
图像描述
更具体地说

CSS:

section {
  margin:0 auto;
  margin-top: 100px;
  display:block;
}
section article {
  display:inline-block;
  position:relative;
  overflow:hidden;
  text-align:center;
}
article img {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  object-fit:cover;
}

让您的HTML保持原样，我在图像部分做了一些小改动，使其更清晰。您不需要添加
img1、img2…

希望这对您有所帮助。
只需更改文本对齐：居中；文本对齐：左对齐；在主要部分。您将获得所需的布局。您的HTML布局将相同

section {
  margin-top: 100px;
  text-align: left;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin: 0 1%;
  padding: 0;
}

article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}

我试过了，但图像仍然居中；-）你能发布你的图片吗？？？@JinsooKang，我更新了我的答案，请现在查看。谢谢更新！但是，它仍然不起作用……）你有上面的答案表吗@您是否已经尝试过
margin:0 auto？还有：
左边距：01%？？@Huelfe感谢您的编辑！是的，我试过了，但还是不起作用左边距：0.1%；'是打字错误，所以我现在编辑它！我提供了一个使用您已经使用的文本对齐的答案。但是你要支持什么浏览器呢？你能用flex box吗？@Erex谢谢你的回答！但是，它仍然不起作用。我发布了我当前的布局。目前，我将支持safari。我从未使用过flex，但如果它解决了这个问题，我想使用它。我用flexbox解决方案更新了我的答案。看看它是否有效，并感到很高兴与你共事
section {
  margin-top: 100px;
  text-align: left;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin: 0 1%;
  padding: 0;
}

article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}