试图居中 img 但没有常见的修复工作 [重复]答案

【问题标题】：Trying to center img but no common fix works [duplicate]试图居中 img 但没有常见的修复工作 [重复]
【发布时间】：2019-03-05 09:35:33
【问题描述】：

所以我编写了这段代码来响应，我希望每张图片都是水平的，在较小的屏幕上，它会是垂直的。我唯一的问题是，在更大的屏幕上，我希望 imgs 居中，但似乎没有代码可以工作。我尝试了 Stack 用户的一些解决方案，但我只能让它完全向左或向右移动，而不是居中。

感谢您的帮助。

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
  max-width: 200px;
  display: block;
  margin: 15px auto;
}


/* Clearfix (clear floats) */

.row::after {
  content: "";
  clear: both;
  display: table;
}


/* Responsive layout - makes the three columns stack on top of each other 
    instead of next to each other */

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>

<div class="row">
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
</div>

【问题讨论】：

居中的第一条规则：不要使用浮动

标签： php html css

【解决方案1】：

使用flexbox 是最简单的。它本质上是响应式的，并保持文档流完整。

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column {
  width: 33.33%;
  padding: 5px;
  max-width: 200px;
  display: block;
  margin: 15px auto;
}


/* Responsive layout - makes the three columns stack on top of each other 
    instead of next to each other */

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>

<div class="row">
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
</div>

【讨论】：