png帶有圓形邊框的圖標 - CSS

我有一個帶有非均勻邊（64像素x 42像素）的PNG圖像圖標，我想在它周圍創建一個圓形邊框。png帶有圓形邊框的圖標 - CSS

我的HTML看起來像這樣：

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

我創建的圖像繞了一圈邊框，但我不能得到的圖標圓的正中間。該圖標位於圓圈的右下角。

這裏是我的圓邊框CSS：

.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; 
}

我的意思是，似乎工作，我有我的圖標在圈子中間，但這是我應該接近這個正確的方式？

這裏是我的小提琴：https://jsfiddle.net/ox0anvL7/

來源

2017-10-07 Joe Bloggs

您的HTML無效。跨度不能包含div元素。 – Rob

你可以做到這一點簡單了很多。我增加了對中心3個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>

來源

2017-10-07 01:10:30 Johannes

我建議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>

來源

2017-10-07 01:10:12 Syden

你可以試試這個方法！

<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;  
}

來源

2017-10-07 01:22:37 YMA

這是一個很好的方法來做到這一點。

這適用於所有情況下，當試圖在div中的東西。

它可以比使用柔性更好，因爲我相信，flex是隻有在IE 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>

希望幫助:)

繳費-Ryan

來源

2017-10-07 01:29:23 Jesus

png帶有圓形邊框的圖標 - CSS

回答

相關問題