[英]How do I make circles within a larger circle, and text within the center of all the circles, in CSS?
How do I make circles with positions relative to the other inner circles within a larger circle, and text within the center of all the circles, in CSS? 如何在CSS中制作相对于其他内部圆相对位置较大的圆,并在所有圆的中心相对于文本的圆?
I'm looking to produce something similar to this: http://i.imgur.com/m8HJr09.png 我正在寻找类似的东西: http : //i.imgur.com/m8HJr09.png
You could use something like this 你可以用这样的东西
CSS 的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 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>
Adjust the height, width etc according you needs. 根据需要调整高度,宽度等。 Hope this helps 希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.