How to center images on a DIV?

Question

I'm practising CSS so I'm working on a simple image gallery. I would like to center the images horizontally on the div but I don't know how to do it. Thanks.

How it looks: https://imgur.com/a/cs5lQhE

(the pink background is just for reference)

html:

<main>
        <div class="images">
            <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg"/>
            <img src="img/6.jpg"/>
            <img src="img/7.jpg"/>
            <img src="img/8.jpg"/>
        </div>
    </main>

css:

*{
    padding:0;
    margin:0;
}

body{
    background-color:#000;
}

.h {
    width: 200px;
    color: #fff;
    padding: 30px 0 30px 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.images {
    width: 100%;
    height: 800px;
    background-color: #ff8787;
}

img {
    width: 410px;
    height: 250px;
    vertical-align: top;
    float: left;
    margin: 0 10px 20px 10px;
    padding: 5px;
    border: 1px solid #fff;
    opacity: 0.85;
}

img:hover{
    opacity:1.0;
}

I tried creating a div for every row and using margin-left: auto; margin-right: auto; — Lautaro Rojas, Apr 13 '22 at 05:37

score 0 · Answer 1 · answered Apr 13 '22 at 05:39

0

You could use display flex to horizontally center

div {
    display: flex;
    justify-content: center;
}

answered Apr 13 '22 at 05:39

ItzTheDodo

90
8

Results: https://imgur.com/a/9JDfDe8 (image is zoomed) It's centered, but now I have every image on the same "row" – Lautaro Rojas Apr 13 '22 at 05:44
I figured it out. I divided the entire div on rows. Thank you. – Lautaro Rojas Apr 13 '22 at 05:49
Yh, divs give you page breaks. For future reference, if you don't want a page break but still want to group into a class or id then use 'span'. – ItzTheDodo Apr 13 '22 at 05:50
If the parent container has a defined width you can use the `flex-wrap` property to force elements to the next row – Professor Abronsius Apr 13 '22 at 06:06

How to center images on a DIV?

1 Answers1