6

Preciso fazer um círculo em volta de uma div com foto, porém minha imagem não está centralizando no círculo esperado, tendo esse resultado:

inserir a descrição da imagem aqui

Tentei fazer dessa forma:

#avatar {
    margin: 0 auto;
    background-image: url('https://i.stack.imgur.com/Dj7eP.jpg');
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.circle {
    margin: 0 auto;
    display: block;	
    border: 2px solid rgb(161,196,66);
    border-radius: 50%;
    height: 80px;
    width: 80px;
}
<span class="circle">
     <div id="avatar"></div>
</span>

1 Resposta 1

6

Cara o certo mesmo seria não usar um span como container para a imagem e sim usar uma div que já é um elemento do tipo block, pois não faz sentido colocar display:block em um span

De qq forma com display:flex no span vc consegue alinhar no centro independente da largura e altura dos elementos usando justify-content: center; align-items: center;. Existem outras formas de fazer, com position:absolute etc, mas essa eu acho a mais prática...

inserir a descrição da imagem aqui

Veja código que usei para ter essa imagem acima:

#avatar {
	margin: 0 auto;
	background-image: url('https://i.stack.imgur.com/Dj7eP.jpg');
	width: 70px;
	height: 70px;
	background-size: cover;
	background-position: top center;
	border-radius: 50%;
}

.circle {
	margin: 0 auto;
	display: block; 
	border: 2px solid rgb(161,196,66);
	border-radius: 50%;
	height: 80px;
	width: 80px;
	display: flex;
    justify-content: center;
    align-items: center;
}
<span class="circle">
	<div id="avatar"></div>
</span>

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 .