如何使一个圆圈，并使用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

回答

相关问题