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

那应该做的工作：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我刚刚使用＆＃34;中心＆＃34;标签，我不知道

代码：

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

使用玉和css水平居中许多图像

2 个答案: