Center an image inside the div [duplicate]

Question

Center an image inside the div [duplicate]

Navigation

#1 by (0 votes)

1

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

Follow the example: (view the entire page as a whole)

	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><imgsrc="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 html5 css

asked by anonymous 20.09.2017 / 20:18

1 answer

Upload Upload Use synchronous or asynchronous tasks to collect print counters

score 0 · Accepted Answer

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

.conteudo-externo {
  ...

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

Where both justify-content and 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><imgsrc="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 you might be interested in: