我如何居中图像（图，无形标题）

Question

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

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

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

Answer 2

设置左右边距似乎解决了这个问题：

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

我不知道你是否反对使用 flexbox，但它可以在 CSS 的几行代码中处理这个问题。就个人而言，我总是把 flexbox 留到最后才用，但我会在任何一天使用它超过 display: table。

试试这个：

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

我如何居中图像（图，无形标题）

How do i center an image (figure, figcaption)

html

css

figure