如何在不拉伸内容的情况下使内容居中？答案

【问题标题】：How can I center content without content stretching?如何在不拉伸内容的情况下使内容居中？
【发布时间】：2018-11-19 12:40:03
【问题描述】：

我想将 2 张图片居中，但由于 display: flex 但 justify-content 无法正常工作

还有其他解决方案可以使图像居中吗？

<div class="column-photo">
<div class="center">
<img src="img/2.%20GenerationAnxiety%20page%202,2.png" 
style="width:40vw;">

<img src="img/3.%20GenerationAnxiety%20page%203,3.png" 
style="width:40vw;">
</div>


column-photo {
flex-wrap: wrap;
flex: 33.33%;

}

.center {
display: flex;
justify-content: center!important;
align-content: center!important;
}

【问题讨论】：

从您的 img 标签中删除 style="width:40vw"。你也没有关闭你的.column-photo div 标签
那我就不能单独选择每张图片的大小了
您应该尝试添加 .column-photo img { flex-grow: 0; }，如果它们占用的空间小于 flex 容器的整个宽度，应该可以防止拉伸，而在较小的尺寸下它们仍然可以正确调整。

标签： html css flexbox centering

【解决方案1】：

你错过了类 column-photo 的点。

没有特定宽度的替代方式

.column-photo {
 text-align:center;
  display:block;
}
.center {
  display:inline-block;
  float:none;
}

【讨论】：

【解决方案2】：

如果您想拉伸图像但保持纵横比，您应该将图像包装在具有单独宽度的 div 中。然后你可以给图像设置 100% 的宽度来保持纵横比。

在这种情况下是否应该使用 vw 是另一个问题

<div class="column-photo">
  <div class="center">
    <div class="img-container" style="width: 40vw">
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="img-container" style="width: 40vw">
      <img src="http://via.placeholder.com/350x150">
    </div>
  </div>
</div>

img{
  width: 100%;
}

【讨论】：

【解决方案3】：

看起来你搞砸了一些属性：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="center">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:10vw;">

  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:20vw;">
</div>

【讨论】：