0

Boa tarde !!
Gostaria de fazer com que uma div circular ficasse centralizada em uma outra div maior, ela está focada na esquerda
podem me ajudar??

	.conteudo-externo{
		width:200px;
		height:200px;
		z-index:3;
		background:#ff1;
		float:left;
	}
	.conteudo{
		width:100px;
		height:100px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		position:left;
		background-image:'images\j2.png';
		}
		.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>
<div class="conteudo-externo">
  <div class="conteudo">
   </div>
  </div>

</body>

2
  • Não existe float: center amigo.
    – RickPariz
    Commented 20/09/2017 às 17:21
  • :'(, vou editar lá
    – Sora
    Commented 20/09/2017 às 17:22

3 Respostas 3

2

.conteudo-externo{
		width:200px;
		height:200px;
		z-index:3;
		background:#ff1;
		float:left;
	}
	.conteudo{
		width:100px;
		height:100px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		position:left;
		background-image:'images\j2.png';
    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>
<div class="conteudo-externo">
  <div class="conteudo">
   </div>
  </div>

</body>

2
  • 1
    Perfeito !!! muito obg !!!
    – Sora
    Commented 20/09/2017 às 17:25
  • apenas para conhecimento, a altura foi em hard code porque ele não consegue pegar automaticamente. A fórmula é a seguinte: Margintop = Altura_Contener - (Altura_objeto/2) Commented 20/09/2017 às 17:28
1

A propriedade "position" não pode receber o valor "left"; Fiz pequenas mudanças na classe 'conteudo':

.conteudo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #000;
    z-index: 5;
    background: #000;
    /*
    position: left;
    background-image:'images\j2.png';
    */
    background-image: url('images\j2.png');
    margin: 50px auto;
}

Na propriedade margin passei 2 parâmetros (50px e 'auto').

  • O 50px significa a margem do eixo Y, ou seja, 50px de margin-top;
  • O 'auto' centraliza o elemento, mas só funciona se o elemento pai estiver com 'width' definido;

Espero ter ajudado;

1
  • Aaaah, entendi, muito obrigado @Veber, não tinha conhecimento disso !! vou ajustar aqui o restante
    – Sora
    Commented 20/09/2017 às 17:33
1

Você pode fazer assim...

.conteudo-externo{
		width:200px;
		height:200px;
		z-index:3;
		background:#ff1;
		float:left;
	}
	.conteudo{
		width:100px;
		height:100px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		position:left;
		background-image:'images\j2.png';
      margin: 0 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>
<div class="conteudo-externo">
  <div class="conteudo">
   </div>
  </div>

</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .