Gallery of css images in list form (limit and center the images on the screen)

Question

Gallery of css images in list form (limit and center the images on the screen)

Navigation

#1 by (0 votes)

0

Hello, I have a page where I want to organize the images in the form of lists I think the example will explain better, but the idea is to organize the images of 3 or 4 by line (space) and with margin on the right and left of 5vh! Thanks

<section class="produtos"><ul><li><img src="img/exemplo.jpg" alt="produto</li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li><li><img src="img/exemplo.jpg" alt="produto"></li></ul></section>

javascript html html5 css

asked by anonymous 16.07.2016 / 21:53

1 answer

What is the error in the last row of UPDATE usage in the MySQL language? Sometimes you do not record images. What's the problem?

score 0 · Answer 1

VH (viewport height) is used for height, so I do not recommend you use border width ...

Anyway, I did the 2 ways. Using vh in the margin: link

html:

    <section class="produtos">
    <ul>
        <li>
            <img src="img/exemplo.jpg" alt="produto">
        </li>
        <li>
            <img src="img/exemplo.jpg" alt="produto">
        </li>
        <li>
            <img src="img/exemplo.jpg" alt="produto">
        </li>
        <li>
            <img src="img/exemplo.jpg" alt="produto">
        </li>
        <li>
            <img src="img/exemplo.jpg" alt="produto">
        </li>
        <li>
            <img src="img/exemplo.jpg" alt="produto">
        </li>
    </ul>
</section>

CSS:

.produtos ul li{
  width: 23.333vh;
  float: left;
  margin: 0 5vh;
}

More correct way: link

(even html)

CSS:

.produtos ul li{
  width: 33.333%;
  float: left;
}