css - 使用 jade 和 CSS 将许多图像水平居中

Question

我知道这个问题已被问过很多次，但没有任何解决方案适合我。我试过 this解决方案，但它对我不起作用，只是将页面左侧的图像对齐。

代码:

head
    link(rel="stylesheet", href="/public/styles/bootstrap.css")
block intro
    .container
        h1(class="text-center") L'équipe
        div(id="images")
            img(alt="aleis", src="/images/team/alexis.jpg", width="160", class="fblogo")
            img(alt="laurent" src="/images/team/laurent.jpg", width="160", class="fblogo")
            img(alt="clement" src="/images/team/clement.jpg", width="160", class="fblogo")
            img(alt="loic" src="/images/team/loic.jpg", width="160", class="fblogo")

Answer 1

这应该可以完成工作:

img{
  width: 300px;
  margin: 5px;
}
#images {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

<div id="images">
  <img src="https://hd.unsplash.com/photo-1415045550139-59b6fafc832f" alt="">
  <img src="https://hd.unsplash.com/photo-1415045550139-59b6fafc832f" alt="">
  <img src="https://hd.unsplash.com/photo-1415045550139-59b6fafc832f" alt="">
  <img src="https://hd.unsplash.com/photo-1415045550139-59b6fafc832f" alt="">
  <img src="https://hd.unsplash.com/photo-1415045550139-59b6fafc832f" alt="">
</div>