html - 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>

必要に応じて、高さ、幅などを調整します。お役に立てれば