Point in CSS below image

Question

I have an image carousel. Each image is a svg logo of fixed height and variable width. I need to place a point below each selected image, so I used the following code:

CSS:

footer .selecionado::before {
    position: absolute;
    content: '';
    background-color: #009CE0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
    transform: translateY(50px);
}

HTML:

<div class="produto-logo selecionado">
    <img src="imagens/logos/erp.svg"/>
</div>

Upshot:

But this way the dot is aligned with the left side of the image. how can I make it be centered below each image?

Answer 1

You have to include the X coordinate in your transforn:translate() also. Note that you now have 2 values (X, Y)

See the template below to better understand:

.selecionado {
    display: inline-block;
    position: relative;
    width: auto;
}
footer .selecionado::before {
    position: absolute;
    content: '';
    background-color: #009CE0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, 50px);
}

<footer>
    <div class="produto-logo selecionado">
        <img src="http://unsplash.it/100/30"/>
    </div>
    <div class="produto-logo selecionado">
        <img src="http://unsplash.it/150/30"/>
    </div>
    <div class="produto-logo selecionado">
        <img src="http://unsplash.it/120/30"/>
    </div>
</footer>

Answer 2

Instead of using transform can use top. Using transform you will need to use prefixes (ex.: -webkit, -ms...) to work in pre-modern browsers. Use top: 50px and to center you use left: 50% and margin-left: -5px (half of width). Take the example:

.produto-logo{
   position: relative;
   width: 100px;
}

footer .selecionado::before {
    position: absolute;
    content: '';
    background-color: #009CE0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
    top: 50px;
    left: 50%;
    margin-left: -5px;
}

<footer>
   <div class="produto-logo selecionado">
       <img height="40" width="100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"/>
   </div>
</footer>