多行垂直对齐图像答案

【问题标题】：Vertically aligning images in multiple lines多行垂直对齐图像
【发布时间】：2016-10-11 09:01:50
【问题描述】：

我有一堆图片，是否可以不在 HTML 中定义任何内容，只在 CSS 中设置样式，以便它们出现在每行垂直对齐的多行中？以下代码有效，但.wrapper 无休止地排成一排，我希望在 5 或 6 张图像后有一个新行。

css

.wrapper {
  display: flex;
  align-items: center;
}

html

<div class="wrapper ">
  <img src="http://placehold.it/150x160" alt="">
  <img src="http://placehold.it/150x120" alt="">
  <img src="http://placehold.it/150x200" alt="">
  <img src="http://placehold.it/150x70" alt="">
  <img src="http://placehold.it/150x170" alt="">
  <img src="http://placehold.it/150x150" alt="">
  <img src="http://placehold.it/150x250" alt="">
  <img src="http://placehold.it/150x110" alt="">
  <img src="http://placehold.it/150x210" alt="">
  <img src="http://placehold.it/150x110" alt="">
  <img src="http://placehold.it/150x210" alt="">
</div>

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

试试这个

css

.wrapper {

}

img {
  margin: 10px 20px;
  display:inline-block;
  vertical-align:top;
}

demo

【讨论】：

这似乎是最合适的解决方案，只有它是vertical-align：middle :)

【解决方案2】：

.wrapper {
  align-items: center;
  width: 100%;
}

img {
  margin: 10px 20px;
  width: 20%;
}

它应该像那样工作。如果您想要更多或更少的图片连续，请更改 img 中的 % 值{}

【讨论】：

【解决方案3】：

试试这个代码：

.wrapper {
}

img {
 margin: 10px 20px;
 width: 20%;
 float:left;
 vertical-align:middle;
}

【讨论】：

【解决方案4】：

对于 Flexbox 解决方案

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
img {
  margin: 10px 20px;
}

<div class="wrapper">
  <img src="http://placehold.it/150x160" alt="">
  <img src="http://placehold.it/150x120" alt="">
  <img src="http://placehold.it/150x200" alt="">
  <img src="http://placehold.it/150x70" alt="">
  <img src="http://placehold.it/150x170" alt="">
  <img src="http://placehold.it/150x150" alt="">
  <img src="http://placehold.it/150x250" alt="">
  <img src="http://placehold.it/150x110" alt="">
  <img src="http://placehold.it/150x210" alt="">
  <img src="http://placehold.it/150x110" alt="">
  <img src="http://placehold.it/150x210" alt="">
</div>

【讨论】：

【解决方案5】：

Do you need like this    


<style>
    .wrapper {
      display: flex;
      align-items: center;
    }

    img {
     margin: 10px 20px;
     width: 20%;
     display:inline-block;
     float:left;
     vertical-align:top;
    }

    </style>
    <html>
    <head>
    <body>
    <div class="wrapper">
      <img src="http://placehold.it/150x160" alt="">
      <img src="http://placehold.it/150x120" alt="">
      <img src="http://placehold.it/150x200" alt="">
      <img src="http://placehold.it/150x70" alt="">
      <img src="http://placehold.it/150x170" alt="">
      <img src="http://placehold.it/150x150" alt="">
      <img src="http://placehold.it/150x250" alt="">
      <img src="http://placehold.it/150x110" alt="">
      <img src="http://placehold.it/150x210" alt="">
      <img src="http://placehold.it/150x110" alt="">
      <img src="http://placehold.it/150x210" alt="">
    </div>
    </body>
    </head>
    </html>

【讨论】：