Center a circular div within another div

Question

Center a circular div within another div

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

0

Good afternoon !! Home I would like to make a circular div be centered on another larger div, it is focused on the left
can you 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><divclass="conteudo-externo">
  <div class="conteudo">
   </div>
  </div>

</body>

html5 css

asked by anonymous 20.09.2017 / 19:18

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><divclass="conteudo-externo">
  <div class="conteudo">
   </div>
  </div>

</body>

20.09.2017 / 19:24

1

You can do 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><divclass="conteudo-externo">
  <div class="conteudo">
   </div>
  </div>

</body>

20.09.2017 / 19:24

Clear Modal Bootstrap HTML within HTML

score 1 · Accepted Answer

The "position" property can not receive the value "left"; I made small changes to the 'content' class:

.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 of the margin-top;
'auto' centralizes the element, but only works if the parent element is defined 'width';

I hope I have helped;