How to space images evenly throughout a page?

user_15741245 0
Viewed 406

I am trying to code a website where I am displaying three images on the bottom of the page. I have coded it to where the images are displaying and appear next to eachother but do not take up the entirety of the page with equal spacing in between the pictures.

I'm looking for a solution where all 3 images appear horizontally with equal spacing inbetween the images and they fill the page horizontally.

HTML

        <section>
            <ul class="film_strip">
                <li><img src="Img\art.jpg" width="400" height="400" alt="classical"/></li>
                <li><img src="Img\artalt.jpg" width="400" height="400" alt="dance" /></li>
                <li><img src="Img\artaalt.jpg" width="400" height="400" alt="painting" /></li>
            </ul>
        </section>

CSS

.film_strip li {
    float: left;
    list-style-type: none;
  }

.film_strip li img {
    float: left;
    background: #DEE0E3;
    padding: 5px;
    margin: 5px;
    border: 1px solid #AAA;
    color: #3C3C3D;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
  }

I appreciate the help!

flexbox css html
4 Answers

You could use flex for this.

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

li {
  margin: 1rem;
}

img {
  max-width: 100%;
}
<ul>
  <li><img src="https://dummyimage.com/600x400/000/fff" /></li>
  <li><img src="https://dummyimage.com/600x400/000/fff" /></li>
  <li><img src="https://dummyimage.com/600x400/000/fff" /></li>
</ul>

user_26663780

If you want to have images have width and height are set to 400px, you can use display: flex and set its height: 400px. Then width of flex item should be set to 400px.

An example:

.film_strip {
  display: flex;
  align-items: stretch; /* Default */
  justify-content: space-around;
  height: 400px;
  width: 100%;
  background: #cacaca;
  margin: 0;
  padding: 0;
}

.film_strip li {
  display: block;
  flex: 0 1 400px;
}

.film_strip li img {
  background: #DEE0E3;
  height: 100%;
  width: 100%;
  padding: 5px;
  border: 1px solid #AAA;
  color: #3C3C3D;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}
<section>
    <ul class="film_strip">
      <li><img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="classical" /></li>
      <li><img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="dance" /></li>
      <li><img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="painting" /></li>
    </ul>
  </section>

user_16462400

Go ahead and use the beauty of flex to display elements on the DOM. I am adding this link to FLEX capabilities so that you learn a bit more about this great CSS ally.

In the case of the IMG tag, you don't really need the color, text-decoration, text-transform and font-size rules since this TAG does not contain any text on it, but this is a suggestion for best practices when it comes to coding.

To avoid using the regular width and height attributes in each IMG tags you write into your HTML, I added them to the CSS instead, that way if you need to change this value in 40 IMG tags, you only do it once in the CSS instead of going on each of them individually, right?

You will need to change the src to your images again, I simply wanted it to show you how this works. I certainly hope this helps, buddy!

.film_strip {
    display: flex;
    justify-content: space-evenly;
}

.film_strip li {
    float: left;
    list-style-type: none;
}

.film_strip li img {
    float: left;
    width: 400px;
    height: 400px;
    background: #DEE0E3;
    padding: 5px;
    margin: 5px;
    border: 1px solid #AAA;
}
<section>
   <ul class="film_strip">
      <li>
         <img src="https://pbs.twimg.com/profile_images/1161044216648257536/qVgKscPf_400x400.jpg" alt="superGirl"/>
      </li>
      <li><img src="https://pbs.twimg.com/profile_images/1334420253800091650/CV_UKMMO_400x400.jpg" alt="wonderwoman" /></li>
      <li><img src="https://i.pinimg.com/474x/ab/97/11/ab9711fd3ba98d13574128f4bffe8366.jpg" alt="catwoman" /></li>
   </ul>
</section>

user_50095140

As other have said, flex is a good method. Play around with the justify-content property in the film_strip component (available options that would suit your needs are justify-content: space-evenly, justify-content: space-between and justify-content: space-around).

    .film_strip {
        display: flex;
        justify-content: space-evenly;

        width: 100%;
        margin: 0;
        padding-left: 0;

        list-style: none;
    }

    .film_strip li {
        display: flex;

        border: 1px solid #AAA;
    }

    .film_strip li img {
        background: #DEE0E3;
        color: #3C3C3D;

        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
    }
user_108942720
Related