Adding a circle around an image in CSS

Question

Adding a circle around an image in CSS

Navigation

#1 by (6 votes)

6

I need to make a circle around a div with photo, but my image is not centering on the expected circle, having this result:

Itriedtodothis:

#avatar {
    margin: 0 auto;
    background-image: url('http://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>

html css

asked by anonymous 06.12.2018 / 13:52

1 answer

score 6 · Accepted Answer

The same thing would be to not use a span as container for the image but instead use a div that is already an element of type block , since it does not make sense to display:block in span

How to display:flex no span you can align in the center independent of the width and height of the elements using justify-content: center; align-items: center; . There are other ways to do it, with position:absolute etc, but this one I find the most practical ...

SeethecodeIusedtogetthisimageabove:

#avatar {
	margin: 0 auto;
	background-image: url('http://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>