Question

我有一篇关于图片的文章。图像响应迅速。容器的每一侧都有15px的间隙，以便在移动和小屏幕上更好地观看。但是，图像没有差距。我喜欢图像占据容器整个宽度的方式。顺便说一下，对于使用<form method="post" enctype="multipart/form-data" autocomplete="off">{% csrf_token %} {{ options_form.position }} {{ options_form.duration }} <input type="submit" /> </form>和figure标签的图片。

所有图像都需要居中。因此，如果一个图像小于容器的图像，则在居中时看起来会好得多。如果图像大于容器的宽度，它将看起来像我想要的方式;没有差距。我创建了一个jsfiddle（底部的链接）

这是HTML

的示例

figcaption

这是CSS：

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

和结果

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

我如何集中.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; }？

Answer 1

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

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

在CSS中，尝试将图形规则更改为以下内容：

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

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

Answer 3

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

试试这个：

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

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

3 个答案: