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

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

https://jsfiddle.net/0soLjvrp/

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

Box: 50px

Svg: 198px

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

4 Likes

This would work too.

https://jsfiddle.net/ex7n1td9/1/

.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;
}

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

4 Likes