Center a circular div within another div

Asked

Viewed 385 times

0

Good afternoon !!
I’d like to make a circular div centered on a larger div, it’s focused on the left
can help me??

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

css html5

  • There is no float: center amigo.

  • :'(, I’ll edit there

3 answers

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>

  • 1

    Perfect !!! very obg !!!

  • Just so you know, the height was in hard code because it can’t pick up automatically. The formula is as follows: Margintop = Altura_contener - (Altura_object/2)

1

You can do it like this...

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

1


The "position" property cannot receive the "left" value; I made small changes in class' content':

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

In the margin property I passed 2 parameters (50px and 'auto').

  • The 50px means the margin of the Y axis, that is, 50px margin-top;
  • auto centralizes the element, but only works if the parent element is width-defined;

I hope I’ve helped;

  • Aaaah, got it, thanks a lot @Veber, I wasn’t aware of that !! I’ll adjust the rest here

Browser other questions tagged css html5

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