원형 테두리가있는 png 아이콘 -

Question

평평하지 않은면 (64px x 42px)이있는 PNG 이미지 아이콘이 있으며 주위에 원 테두리를 만들고 싶습니다.

<span class="cat_circle"> 
    <div class="cat_icon"> 
     <img src="https://cdn.pbrd.co/images/GNK97WG.png"> 
    </div> 
</span> 

내가 이미지 주위 원의 경계를 만들었지 만 난 그냥 원의 정확한 중간에있는 아이콘을 얻을 수 없습니다

내 HTML은 다음과 같습니다. 아이콘은 원의 오른쪽 하단에 있습니다.

.cat_circle { 
border: 3px solid #7E9CC2; 
border-radius: 50%; 
width: 25px; 
height: 25px; 
overflow: hidden; 
position: absolute; 
padding: 30px; 
left: 10px; 
top: 10px; 
text-align: center; 
vertical-align: middle; 
} 

난 후 실제 PNG 이미지와 하구 시작하고 내가이 같은 부정적인 여백을했다 : 내 말은

.cat_icon { 
margin-top: -10px; 
margin-left: -18px; 
} 

는 것을 여기

는 원형 테두리 내 CSS입니다 직장과 나는 원의 한가운데에 내 아이콘을 가지고 있지만 이것이 바로 접근해야하는 올바른 방법입니까 ??

여기 내 바이올린입니다 : https://jsfiddle.net/ox0anvL7/

Answer 1

당신은 그 많은 간단하게 할 수 있습니다. 나는 센터링 세 가지 인 flexbox 속성을 추가,하지만 하나의 HTML 래퍼와 (너무 복잡) CSS 설정 적지 삭제 :

.cat_circle { 
 
    border: 3px solid #7E9CC2; 
 
    border-radius: 50%; 
 
    width: 70px; 
 
    height: 70px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.cat_circle img { 
 
    width: 80%; 
 
    height: auto; 
 
}

<span class="cat_circle"> 
 
     <img src="https://cdn.pbrd.co/images/GNK97WG.png"> 
 
</span>

Answer 2

나는 인 flexbox을 건의 할 것, 단순화하고 다른 클래스의 필요성을 줄일 수 있습니다.

.cat_circle { 
 
    border: 3px solid #7E9CC2; 
 
    border-radius: 50%; 
 
    width: 25px; 
 
    height: 25px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    padding: 30px; 
 
    left: 10px; 
 
    top: 10px; 
 
    /* new */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<span class="cat_circle"> 
 
    <img src="https://cdn.pbrd.co/images/GNK97WG.png"> 
 
</span>

Answer 3

당신은이 방법을 시도 할 수 있습니다!

<div class="image-circle"> 
    <div> 
    <img class="img" src="https://cdn.pbrd.co/images/GNK97WG.png"> 
    </div> 
</div> 

.image-circle { 
    width:25%; 
} 
.image-circle:after { 
    content: ""; 
    background: #4679BD; 
    padding-bottom: 100%; 
    border-radius: 50%; 
    display: block; 
    width: 100%; 
    height:0; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%;  
} 
.image-circle div { 
    float:left; 
    width:100%;  
    line-height:1em; 
    margin-top:-0.5em; 
    padding-top:40%; 
    text-align:center;  
} 

Answer 4

이것은 꽤 좋은 방법입니다.

div 안에 뭔가를 가운데 놓으려고 할 때도 마찬가지입니다.

내가 플렉스 도움이 :)

즉 10 년 이후 (source here)의 버전

.cat_circle { 
 
    position: absolute; 
 
    display: inline-block; 
 
    border: 3px solid #7E9CC2; 
 
    border-radius: 50%; 
 
    width: 70px; 
 
    height: 70px; 
 
} 
 
.cat_circle img { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    width: 80%; 
 
    transform: translate(-50%, -50%); 
 
}

<span class="cat_circle"> 
 
     <img src="https://cdn.pbrd.co/images/GNK97WG.png"> 
 
</span>

희망 만 avaiable이다라고 생각대로 플렉스 사용하는 것보다 더 좋을 수 있습니다 -Ryan