html - 我如何居中图像(图，无形标题)

Question

我有一篇带图片的文章。图像是响应式的。容器的每一侧都有 15px 的间隙，以便在移动设备和小屏幕上更好地查看。但是，图像没有间隙。我喜欢图像占据容器整个宽度的方式。顺便说一句，对于图像，我使用 figure 和 figcaption 标签。

所有图片都需要居中。因此，如果一个图像小于容器的宽度，居中时看起来会好得多。如果图像比容器的宽度大，它会看起来像我想要的那样；没有间隙。我创建了一个 jsfiddle(链接在底部)

这是 HTML 的示例

<div class="container inner">
<p>Commodo fugiat nisi est id nisi consectetur in laborum officia.</p>

<figure>
  <img src="http://via.placeholder.com/450x250" width="" height="" alt="">
  <figcaption>THIS IMAGE NEED TO BE CENTERED</figcaption>
</figure>

<p>Commodo fugiat nisi est id nisi consectetur in laborum officia. Non commodo enim sint magna dolore officia eu mollit. Ad quis nulla est mollit exercitation occaecat non adipisicing dolor quis tempor qui quis sed officia id. Veniam anim sint veniam dolore aliqua id qui commodo occaecat qui dolore. Ex ut voluptate nostrud officia do.</p>

<figure>
  <img src="http://via.placeholder.com/950x350" width="" height="" alt="">
  <figcaption>Eiusmod aliquip ut ex laborum id occaecat ea elit non. Excepteur est aliqua pariatur esse occaecat culpa mollit irure in duis labore fugiat velit enim in velit eiusmod.</figcaption>
</figure>

<p>Commodo fugiat nisi est id nisi consectetur in laborum officia. Non commodo enim sint magna dolore officia eu mollit. Ad quis nulla est mollit exercitation occaecat non adipisicing dolor quis tempor qui quis sed officia id. Veniam anim sint veniam dolore aliqua id qui commodo occaecat qui dolore. Ex ut voluptate nostrud officia do fugiat excepteur laborum cupidatat sed id excepteur ut et. Enim enim laborum minim adipisicing reprehenderit culpa ea occaecat nisi eu id veniam officia. Duis eu quis in nostrud duis nostrud sed et laboris tempor laborum mollit tempor in consequat adipisicing. Dolor pariatur qui qui quis duis fugiat nisi ut.</p>
</div>

这是 CSS:

.container {
  max-width: 700px;
  margin: 0 auto;
  background-color: pink;
}

.container > * {
  margin-top: 20px;
}

.inner {
  padding-left: 15px;
  padding-right: 15px;
}

figure {
  display: table;
  margin-right: -15px;
  margin-left: -15px;
}

figure img {
  max-width: 100%;
  height: auto;
  display:block
}

figure figcaption {
  display: table-caption;
    caption-side: bottom;
  color: blue;
  margin: 5px 15px 0 15px;
}

结果

https://jsfiddle.net/o8sozt9m/17/

如何使 figure 居中？

Answer 1

在CSS中，尝试将图形规则改为如下:

figure {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

但它会影响所有图形。如果要应用于单个图形，请将 id 添加到该元素并在 CSS 中使用 id-selector。