KPC
Kevin Powell - Community•4d ago
Helgi

how to position arrows

https://codepen.io/etrbbr/pen/ZYzowKB Hello everyone! Could you please tell me how to position the arrows in the center of my div (image)?
df
CodePen
Untitled
...
2 Replies
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•4d ago
You can replace the ".ciferblat" selector in css with this 
.ciferblat {
  background-image: url(https://png.pngtree.com/png-clipart/20220705/ourmid/pngtree-clock-face-no-hand-roboto-font-png-image_5683165.png);
  background-repeat: no-repeat;
  position: relative;
  width: min(360px, 100%);
  aspect-ratio:1;
  position: relative;
}

#arrowForSeconds,
#arrowForHours,
#arrowForMinutes {
  position: absolute;
  inset:0;
  margin:auto;
  translate:0 -50%;
}
.ciferblat {
  background-image: url(https://png.pngtree.com/png-clipart/20220705/ourmid/pngtree-clock-face-no-hand-roboto-font-png-image_5683165.png);
  background-repeat: no-repeat;
  position: relative;
  width: min(360px, 100%);
  aspect-ratio:1;
  position: relative;
}

#arrowForSeconds,
#arrowForHours,
#arrowForMinutes {
  position: absolute;
  inset:0;
  margin:auto;
  translate:0 -50%;
}
But i don't really see any reason for targeting id's in your CSS, i would recommend giving your "arrows" a class instead. optionally they can keep the id but also give them a class. You should avoid targeting ids in CSS due to the high specificity level, it does not mean you should never do it, but if you do it, you should have a really good reason for it, and i just don't see the reason here in this case.
Helgi
HelgiOP•2d ago
thanks mate

Did you find this page helpful?