在圆边框中添加文字

Question

下面的以下代码添加了一个广播按钮，其中包含一个数字，但是边框应该是圆，我该如何使其圆圈？

请注意，文本的位置对于不受CSS的影响很重要。

 
 p {
 outline-style: solid;
 padding : 16px;
     position: absolute;
 }
 
 

<p><input type="radio">1</p>

Answer 1

使用border和border-radius属性而不是outline-style：

 p {
   border: 3px solid #000;
   border-radius: 50%;
   height: 45px;  
   line-height: 45px;
   position: absolute;
   text-align: center;
   width: 45px;
 }

<p><input type="radio">1</p>

如您所见，您可能还需要更改高度和宽度元素，以确保该元素是一个完美的圆(嗯，正方形(。

Answer 2

尝试设置边框，然后使用订单-radius。

p {
border: solid 2px black;
     padding : 16px;
     position: absolute;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     }

<p><input type="radio">1</p>