如何在 html/css 中以直线对齐图像列表？

Question

我有一个 fiddle，我想在其中 以直线方式列出图像，并在它们之间留出一定的间距 类似于下面的屏幕截图：

我用来将图像列表放在一条直线上的 [=46=] 代码是：

<div class="images">
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7013">

<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7019">

<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" width="150" height="44" class="alignleft size-full wp-image-7088">

<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7068">

<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7070">

<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7071">

<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7072">
</div>

我试过 CSS 代码（但没用），以便将图像列表直接排列间距相当大的行是：

.images
{
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.images img
{
padding-left: 2%;
padding-right: 2%;
}

使用上面的 CSS 代码，图像确实位于中心，但似乎完全缩小了。

问题陈述：

我想知道我应该在 fiddle 中添加什么 CSS 代码，以便图像列表显示在一条直线上，彼此之间有相当大的间距。

Answer 1

我已经编辑了你的fiddle

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}

.images img {
  width: 5rem;
  height: auto
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="images">
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">

<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">
</div>

</body>

</html>

Answer 2

尝试将这些修改实施到适合我的代码中。 vw 表示 viewport-width

为 html 文件中的每个图像设置 width="90vw" 并将以下内容更改为 css。

.images img
{
padding-left: 1vw;
padding-right: 1vw;
}

如何在 html/css 中以直线对齐图像列表？

How to align list of images in a straight line in html/css?

html

css

image

centering