HTML center align not working

Question

I want to align some images to the center of a div but they just seem to fall down a litlle instead

Answer 1

No need to set a margin, images are inline elements, just use the text-align property:

.grey {
background: #cac3c4;
text-align: center;
}

That's all.

DEMO #1 - https://code.sololearn.com/WN0gZMqKSPvh/?ref=app

DEMO #2 (alternative version) - https://code.sololearn.com/Wy3pYRXfBtNV/?ref=app

Answer 2

they fall down a little? maybe theres padding on the div? or the image has margin? can u show the code here? im on web lol

Answer 3

just upload your code on code playground will do lol and attach the link
and btw align="center" on img is not gonna align the img lol but u can try this
div {margin: auto}

Answer 4

heres the html:

<div class="grey">
<img class="opacity" src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-512.png" width="60" height="60">
<img align="center" title="Partys" class="opacity" src="https://cdn0.iconfinder.com/data/icons/everyday-objects-line-art-1/128/balloons-512.png" width="6%" height="6%" alt="Partys Icon">
<img align="center" title="Discos" class="opacity" src="https://d30y9cdsu7xlg0.cloudfront.net/png/25440-200.png" width="6%" height="6%" alt="Discos Icon">
<img align="center" title="Workshops" class="opacity" src="https://cdn4.iconfinder.com/data/icons/car-repair-glyph/100/repair_mechanican_car_repair_garage_car_workshop-512.png" width="6%" height="6%" alt="Workshops Icon">
<img align="right" title="Prices" class="opacity" src="https://www.shareicon.net/download/2015/10/06/113345_coin.svg" width="6%" height="6%" alt="Prices Icon">
</div>

Answer 5

heres the css:

body{
margin: 0;
}

.grey{
background: #cac3c4;
}

.opacity:hover{
opacity: 0.5;
}

Answer 6

how do i post some code