如何在CSS中制作大圆圈内的圆圈以及所有圆圈中心内的文字？

Question

如何在CSS中使用相对于大圆圈内其他内圆的位置以及所有圆的中心内的文字创建圆圈？

我期待产生类似这样： http://i.imgur.com/m8HJr09.png

Answer 1

你可以使用类似这样

CSS

.outer_circle { 
    height:400px; 
    line-height:400px; 
    width:400px; 
    border-radius:50%; 
    background-color:#000000; 
    position:relative; 
    margin:0 auto; 
    } 

.outer_circle p { 
    text-align:center; 
    vertical-align:middle; 
    color:#ffffff; 
    } 

.circle { 
    background-color:#aeaeae; 
    border-radius:50%; 
    height:40px; 
    line-height:20px; 
    width:40px; 
    position:absolute; 
    margin:10px; 
    } 

.circle p { 
    font-size:10px; 
    vertical-align:middle; 
    color:#000000; 
    } 

HTML

<div class="outer_circle" > 
<div class="circle" style="top:10px;left:150px"><p>Text</p></div> 
<div class="circle" style="top:70px;left:260px"><p>Text</p></div> 
<div class="circle" style="top:150px;left:320px"><p>Text</p></div> 
<div class="circle" style="top:250px;left:260px"><p>Text</p></div> 
<div class="circle" style="bottom:70px;left:150px"><p>Text </p></div> 


<p> Text Text Text Text Text Text Text Text </p> 

根据需要调整高度，宽度等。 希望这会有所帮助