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

Question

I’m trying to get the square box image to be positioned in the middle of the svg. How would this be done? I've tried a few things but it keeps appearing in the top corner.

Code: https://jsfiddle.net/0soLjvrp/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}



.container-left {
 
  width: 606px;
  margin: 0;
}

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/EvDQJbO.png") no-repeat 0 0;
  background-size: 100% 200%;
}

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

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.container-left .jacketd .lines::before,
.container-left .jacketd .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketd .lines::after {
  left: 399px;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
}

.container-left .wraph .nav li svg:hover use {
  fill: #0059dd;
}

.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}

a:focus {
  outline: 0;
}

.hide {
  display: none;
}

FluffyKitten · Accepted Answer

The square image is being added a background image, so to centre it in the container, you can use center for the background-position in the css (Note: You can use center just once like this as shorthand to centre it horizontally and vertically):

.container-left .jacketd .coversvg {
  /* other rules */
  background: url("https://i.imgur.com/cZ8OKm5.png") no-repeat center;
}

If you want to make the image appear centred inside the triangle, you can change this to something like this (30% from left, centered vertically) to position it where you would like it to go:

  background: url("https://i.imgur.com/cZ8OKm5.png") 30% center;

.container-left {
  width: 606px;
  margin: 0;
}

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/EvDQJbO.png") no-repeat 0 0;
  background-size: 100% 200%;
}

.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 35% center;
}

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.container-left .jacketd .lines::before,
.container-left .jacketd .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketd .lines::after {
  left: 399px;
}

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

Answers (1)

Related Questions