带文字的圈子周围

Question

我会怎样做“是的!!!”以下代码中的文字出现在圆圈中央？

我试着添加填充，但它只是将文本向右移动，即填充不是均匀地应用于所有方向。

这里是我的代码（http://jsfiddle.net/yxVkk/646/）

的HTML： -

<div id="big-circle" class="circle big"> 
<div class="circle one"><span style="top: -50px;">YES!!!</span></div> 
<div class="circle two"></div> 
<div class="circle three"></div> 
<div class="circle four"></div> 
<div class="circle five"></div> 
<div class="circle six"></div> 
</div> 

的CSS： -

.circle { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    display: inline-block; 
    position: absolute; 
} 

.circle.big { 
    width: 150px; 
    height: 150px; 
    background-color: blue; 
    margin: 100px; 
    } 

    .one { 
    left: -100px; 
    top: -100px; 
    } 

    .two { 
    top: -60px; 
    left: 50px; 
    } 

    .three { 
    right: -25px; 
    top: -25px; 
} 


    .four { 
     left: -25px; 
     bottom: -25px; 
     } 

     .five { 
     bottom: -60px; 
    left: 50px; 
    } 

    .six { 
    right: -25px; 
    bottom: -25px; 
    } 

注：我宁愿做到这一点没有JS，如上面的例子。

Answer 1

删除style="top: -50px;"并添加

.one>span{ 
    display:block; 
    width: 100%; 
    line-height:20px; 
    font-size: 20px; 
    margin-top: 40px; 
    text-align:center 
} 

小提琴：http://jsfiddle.net/yxVkk/648/

Answer 2

首先，您需要的是给你的跨度的位置，然后推着左侧和顶部：

.one span { 
    position: absolute; 
    top: 40%; 
    left: 30%; 
} 

小提琴：http://jsfiddle.net/yxVkk/647/