How do you center an image in the middle of an svg?

HTML & CSS
1

I’m trying to get the square box in the middle of the svg.

2

well, how big is the box, and how big is the SVG?

3

Box: 50px

Svg: 198px

4

As you know, your square box is actually a background image you set on the svg. You set it as no repeat but you left it’s default coordinates as the top left corner.

Use background position to move the image towards the center.
I staggered it towards the left.

.container-left .jacketd .coversvg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    background: url("https://i.imgur.com/cZ8OKm5.png") no-repeat 30% 50%;
}

Screenshot
Screenshot350×281 2.96 KB

4 Likes
5

This would work too.

.container-left .jacketd .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  background: url("https://i.imgur.com/cZ8OKm5.png") no-repeat 30% center;
}
6

That’s pretty much the code @Ray.H gave you.

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.