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?
I'm looking to produce something similar to this: http://i.imgur.com/m8HJr09.png
You could use something like this
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>
Adjust the height, width etc according you needs. Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.