如何使一個圓圈，並使用CSS

這裏是我的小提琴Fiddle把文字在中間，這裏是代碼如何使一個圓圈，並使用CSS

.optionalphabetnumber { 
 
\t background-color:#ff3333; 
 
\t color:white; 
 
\t width:20px; 
 
\t height: 20px; 
 
\t text-align:center; 
 
    border-radius:50%; 
 
} 
 
button { 
 
    background-color: #ffffff; 
 
    color: #777; 
 
    font-size: 18px; 
 
    height: 66px; 
 
    min-width: 320px; 
 
    width: 50%; 
 
    cursor: pointer; 
 
    text-align: left; 
 

 
}

<button><span class="optionalphabetnumber">A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Superman</button>

我想提出「A」了一圈。但border-radius:50%不是一個完美的圓圈。我如何將文本（只是「A」）放在中間？

來源

2017-10-09 Josh Poor

你'span'需要爲'邊界半徑矩形：50％;'來創建一個圓，而不是橢圓。如果元素是一個像「span」這樣的內聯元素，則不會發生這種情況。將顯示更改爲塊級別，以便正確應用「高度」和「寬度」等尺寸屬性。 – hungerstar

這會爲你工作。

我已經加入display: inline-block;margin-right: 5px;float: left;您.optionalphabetnumber，因爲.optionalphabetnumber是<span>，它的默認顯示屬性是inline。所以它不會與其他組件正確對齊，我們也無法正確設計它。所以通過應用display: inline-block;我們覆蓋了它的默認屬性。

.optionalphabetnumber { 
 
    background-color: #ff3333; 
 
    color: white; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
    float: left; 
 
} 
 

 
button { 
 
    background-color: #ffffff; 
 
    color: #777; 
 
    font-size: 18px; 
 
    height: 66px; 
 
    min-width: 320px; 
 
    width: 50%; 
 
    cursor: pointer; 
 
    text-align: left; 
 
}

<button><span class="optionalphabetnumber">A</span>Superman</button>

來源

2017-10-09 14:06:22 weBBer

顯示設定爲inline-block，以及可選，給圈內一些填充...

.optionalphabetnumber { 
 
    background-color: #ff3333; 
 
    color: white; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    padding: 1em; 
 
    margin-right: 1em; 
 
} 
 

 
button { 
 
    background-color: #ffffff; 
 
    color: #777; 
 
    font-size: 18px; 
 
    height: 66px; 
 
    min-width: 320px; 
 
    width: 50%; 
 
    cursor: pointer; 
 
    text-align: left; 
 
}

<button> 
 
<span class="optionalphabetnumber">A</span>Superman</button>

來源

2017-10-09 14:06:15 sol

添加display:inline-block;到.optionalphabetnumber 的<span>是inline元素，應用到內聯高度不喜歡他們在block或inline-block做工作。

.optionalphabetnumber { 
 
\t background-color:#ff3333; 
 
\t color:white; 
 
\t width:20px; 
 
\t height: 20px; 
 
\t text-align:center; 
 
    border-radius:50%; 
 
    display:inline-block; 
 
} 
 
button { 
 
    background-color: #ffffff; 
 
    color: #777; 
 
    font-size: 18px; 
 
    height: 66px; 
 
    min-width: 320px; 
 
    width: 50%; 
 
    cursor: pointer; 
 
    text-align: left; 
 

 
}

<button><span class="optionalphabetnumber">A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Superman</button>

來源

2017-10-09 14:07:44 zer00ne

如何使一個圓圈，並使用CSS

回答

相關問題