Hello, can you help me with my problem?
I want to center image into circle, but i dont know how.
When i type size 45x45, picture is in the center of the cicrle, but picture is smaller, that i want.
When i type size 46x46 and more picture is moving to right-bottom corner. I tried margin-bottom and margin-right commands, but it doesnt do nothting. Here is my code
CSS:
.social{
float: left;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #f0e68c;
border: 1px dotted #b8860b;
margin-left: 15px;
padding: 2px;
}
.social1{
float: left;
margin-left: 5px;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #f0e68c;
border: 1px dotted #b8860b;
padding: 2px;
}
.social2{
float: left;
width: 45px;
height: 45px;
margin-left: 5px;
border-radius: 50%;
background-color: #f0e68c;
border: 1px dotted #b8860b;
padding: 2px;
}
.social1 img{
width: 45px;
height: 45px;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.social2 img{
width: 45px;
height: 45px;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.social img{
width: 47px;
height: 47px;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
HTML:
<div class="social">
<image src="img/fbs.svg">
</div>
<div class="social1">
<image src="img/fbs.svg">
</div>
<div class="social2">
<a href="#"><image src="img/insta.png"></a>
</div>