垂直对齐多行图像

Question

我有一堆图片，是否可以不在 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>

Answer 1

试试这个

css

.wrapper {

}

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

demo

Answer 2

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

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

它应该是这样工作的。如果你想连续多张或少张图片，改变img中的%值{}

Answer 3

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

Answer 4

试试这个代码：

.wrapper {
}

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

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

垂直对齐多行图像

Vertically aligning images in multiple lines

html

css

vertical-alignment

flexbox