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

【问题标题】：How to align list of images in a straight line in html/css?如何在 html/css 中以直线对齐图像列表？
【发布时间】：2018-10-21 00:55:15
【问题描述】：

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

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

<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 代码（但它不起作用）以便将图像列表放在一条直线上，并留出相当大的间距： p>

.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 代码，图像确实位于中心，但似乎完全缩小了。

问题陈述：

我想知道我应该在小提琴中添加哪些 CSS 代码，以便图像列表以直线显示，彼此之间有相当大的间距。

【问题讨论】：

标签： html css image centering

【解决方案1】：

我已经编辑了你的小提琴

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

【讨论】：

感谢您的回答。它看起来非常好。我还有一个问题。 Franchise Harbor and Intercom images 似乎完全缩小了。有什么办法可以解决吗？所有其他图片看起来都很好。
您可以设置图像的样式，而不是 width:5rem 和 height:auto 您可以将其更改为 height: 2.5rem 和 width: auto
谢谢。有效。我有一个类似的question。在其中，图像存在于广场内。在这种情况下，我应该在 CSS 中进行哪些更改，以使文本位于底部而图像保持在其所在的位置。

【解决方案2】：

尝试将这些修改实施到适合我的代码中。 vw 表示 视口宽度

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

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

【讨论】：