帶文字的圈子周圍

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/