center many images on horizontally with jade and css

Question

I know this question has been asked many times but no solutions worked for me. I tried this solution but it didn't worked for me and just aligned the images on the left of the page.

Code:

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

Aaron Mahlke · Answer 1 · 2016-10-05T10:08:37.327

0

That should do the job:

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>

edited Oct 05 '16 at 10:08

answered Oct 05 '16 at 09:35

Aaron Mahlke

337
1
8

should I use the flag on th div or on the img ? – baldash Oct 05 '16 at 09:51
as I did it: on the container surrounding the images. In this case `#images` should work just fine. – Aaron Mahlke Oct 05 '16 at 09:55

score 0 · Accepted Answer · answered Oct 05 '16 at 15:32

I just fixed by using the "center" tag which I didn't know

Code :

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

center many images on horizontally with jade and css

2 Answers2