ジェイドと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

私はちょうど私が

を知らなかった "センター" タグを使用して固定

コード：

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

Answer 2

：

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>