css border-radius圓形變爲橢圓形，位置：絕對

我正在圍繞字體真棒圖標創建一個圓圈。我的問題是，當我添加position: absolute圓成爲一個橢圓。css border-radius圓形變爲橢圓形，位置：絕對

同樣的情況，如果我是設置display: block

這裏是什麼，我想實現的圖像 -

<slide class="assessment-score"> 
    <div class="score-heading pass"> 
    <span id="score-salutation" class="light">CONRADULATIONS</span> 
    <span id="score-message">YOU HAVE PASSED</span> 
    <i class="fa fa-check-circle"></i> 
    </div> 
    <div class="score-results"> 
    <span id="score">You have scored 92%</span> 
    <button>DOWNLOAD YOU CERTIFICATE</button> 
    <a id="assessment-close"><i class="fa fa-times-circle-o"></i> CLOSE ASSESSMENT</a> 
    </div> 
</slide>

的CSS

slide.assessment-score .score-heading{ 
    height: 33%; 
    background-color: #a8db66; 
    border-radius: 5px 5px 0 0; 
    color: #ffffff; 
    position: relative; 
} 
slide.assessment-score .score-heading i{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    font-size: 6em; 
    margin-bottom: -30px; 
    border-radius: 50%; 
    padding: 1rem 
    background-color: black; 
}

來源

2015-11-04 Keith Power

你需要定義的寬度和高度絕對定位或相對它包定位div或者將定位設置爲相對，並使用頂部，左側定位它 –

問題不是因爲你設置了'position：absolute'。這是因爲你設置了'right：0'和'left：0'。這說明它佔據了整個寬度。 – RyanS

問題是高度寬度會改變，所以我不知道值 –

要將絕對定位的div水平居中，您不要使用left: 0和right: 0。正如你所看到的，通過將div的一端設置到包含框的左邊緣，並將另一端設置到右邊緣，實際上可以將其拉伸。

水平居中絕對定位div試試這個：

slide.assessment-score .score-heading i { 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, 0); 
}

，詳細瞭解這個作品怎麼看：Element will not stay centered, especially when re-sizing screen

來源

2015-11-04 00:57:42

非常感謝，你的例子和留下的意見是有道理的，爲什麼我有這個問題 –

css border-radius圓形變爲橢圓形，位置：絕對

回答

相關問題