CODEWITHSUNDEEP
htmlcssimage
d3pod
d3pod

Reputation: 86

Images don't align in center

I have to align 4 images to the center, but I can't. I already tried with the text_align and with several other examples I found.

HTML Code:

#categorias{
    width: 100%;
}
.category {
    float: left;
    height: 200px;
    width: 250px;
    border-style: solid;
    border-color: #009bdb;
    border-radius: 5px;
    border-width: 4px;
}
<div id="categorias">
        <img class="category" alt="informatica" src="imgs/19.png" />
        <img class="category direita" alt="papelaria" src="imgs/material-escolar.jpg" />
        <img class="category direita" alt="segurança" src="imgs/ssm-1.jpg" />
        <img class="category direita" alt="multimedia" src="imgs/HTS5590.jpg" />
    </div>

I already did this on other parts of the same site and it worked, I do not understand why it doesn't work now. In the code I leave above, it does not contain any definition to center.

Thanks

Upvotes: 1

Views: 46

Answers (1)

jeh
jeh

Reputation: 577

CSS flex is great for layouts like this. Here is a great resource describing all the ways flexbox can be implemented to create a variety of layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#categorias{
    display:flex;
    justify-content:center;
    align-items:center;
    
    /* use this if you want items to wrap, remove if you want them in a row */
    flex-wrap:wrap;
}
.category {
    height: 200px;
    width: 250px;
    border-style: solid;
    border-color: #009bdb;
    border-radius: 5px;
    border-width: 4px;
}
<div id="categorias">
        <img class="category" alt="informatica" src="http://via.placeholder.com/350x150" />
        <img class="category direita" alt="papelaria" src="http://via.placeholder.com/350x150" />
        <img class="category direita" alt="segurança" src="http://via.placeholder.com/350x150" />
        <img class="category direita" alt="multimedia" src="http://via.placeholder.com/350x150" />
    </div>

Upvotes: 1

Related Questions