Tenho um carrossel de imagens. Cada imagem é uma logo svg de altura fixa e largura variável. Preciso colocar um ponto abaixo de cada imagem selecionada, para isso usei o seguinte código:
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>
Resultado:
Porém dessa forma o ponto fica alinhado com o lado esquerdo da imagem. como posso fazer com que fique centralizado abaixo de cada imagem?