如何在CSS中制作相对于其他内圈的位置的圆圈,以及所有圆圈中心的文字?
我希望制作与此类似的东西: http://i.imgur.com/m8HJr09.png
答案 0 :(得分:0)
你可以使用这样的东西
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>
根据需要调整高度,宽度等。 希望这有帮助