我如何使图像居中（图，figcaption）

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

似乎设置左右边距可以解决问题：

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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

.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;
}

<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>

Answer 2

在CSS中，尝试将figure的规则改成如下：

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

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

Answer 3

我不知道你是否反对使用 flexbox，但它只需几行 CSS 就可以解决这个问题。就个人而言，我总是将 flexbox 留作最后的手段，但我会在任何一天使用它而不是 display: table。

试试这个：

figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}