Point in CSS below image

Question

Point in CSS below image

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a carousel of images. Each image is a svg logo of fixed height and variable width. I need to put a dot below each selected image, for this 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>

Result:

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

html5 css3

asked by anonymous 09.07.2018 / 16:32

2 answers

0

Instead of using transform you can use top . Using transform you will have 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 width ). See 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>

09.07.2018 / 17:03

can not add or update a child row a foreign key constraint fails laravel How to send an image per post in the angle

score 1 · Accepted Answer

You have to include the X coordinate in your transforn:translate() as well. Notice that you now have 2 (X, Y)

See the template below for a better understanding:

.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><divclass="produto-logo selecionado">
        <img src="http://unsplash.it/150/30"/></div><divclass="produto-logo selecionado">
        <img src="http://unsplash.it/120/30"/>
    </div>
</footer>