Center an image inside the div

Asked

Viewed 753 times

1

I have a div circular and a function that places the image inside the div.
The only thing I need is for the image to be centered on div.

Follow the example: (Please view the excerpt in full page) 

	function clickImagem(src)
	{
	  $(conteudo).empty() //Ao clicar no produto, limpa todos os Charms presentes no Div Conteudo
	  document.getElementById('conteudo').style.background="url('"+src+"') no-repeat";
	}
	.conteudo-externo{
		width:500px;
		height:500px;
		z-index:3;
		background:#ff1;
		float:left;
	}
	.conteudo{
		width:350px;
		height:350px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		margin: 50px auto;
		}
		.img{
			z-index:1;
			width:130px;
                        height:130px
                        background-position:center;
			opacity:0.5;
		}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Teste</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
<img src="https://media.dooca.com.br/forfisher.com/produto/grande/pulseira-macrame-tucunare-preta-e-marrom-14534900308000.jpg" onclick="clickImagem(this.src)">
<div class="conteudo-externo">
  <div class="conteudo" id="conteudo">
   </div>
  </div>

</body>

javascript css html5

1 answer

0


An easy and modern solution is to use flexbox. In this case it would apply to your div external as follows:

.conteudo-externo {
  ...

  display: flex; /*aplicar flex*/
  justify-content: center; /*alinhado ao centro horizontalmente */
  align-items: center;  /*alinhado ao centro verticalmente*/
}

In which both the justify-content like the align-items refer to the children of conteudo-externo.

Exemplifying on your page:

function clickImagem(src) {
  $(conteudo).empty() //Ao clicar no produto, limpa todos os Charms presentes no Div Conteudo
  document.getElementById('conteudo').style.background = "url('" + src + "') no-repeat";
}
.conteudo-externo {
  width: 500px;
  height: 500px;
  z-index: 3;
  background: #ff1;
  float:left;
  
  display: flex;
  justify-content: center;
  align-items: center; 
}

.conteudo {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 3px solid #000;
  z-index: 5;
  background: #000;

  
}

.img {
  z-index: 1;
  width: 130px;
  height: 130px background-position:center;
  opacity: 0.5;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Teste</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
  <img src="https://media.dooca.com.br/forfisher.com/produto/grande/pulseira-macrame-tucunare-preta-e-marrom-14534900308000.jpg" onclick="clickImagem(this.src)">
  <div class="conteudo-externo">
    <div class="conteudo" id="conteudo">
    </div>
  </div>

</body>

Links that might interest you:

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.