title: Using CSS to generate inner and outer circles
body: <p>Following the guide <a href="http://davidwalsh.name/demo/css-circles.php" rel="nofollow noreferrer">here</a>, I've been working on generating circles using CSS. I've done the basics but am stuck trying to get one CSS-generated circle superimposed on top of another. My Fiddle is <a href="http://jsfiddle.net/cvh2013/7txCN/" rel="nofollow noreferrer">here</a>. </p>
  
  <p>I'd like to:</p>
  
  <ol>
  <li>adjust the positioning of the inner circles containing the text - I'm unable to get it lined up properly on the outer circle. The idea is that each circle will be composed of an outer circle and an inner circle, and each inner circle will contain the appropriate text.</li>
  <li>get the text to line up correctly so that it's centred vertically and horizontally in the inner circle</li>
  <li>get all three of the circles on the same horizontal line.</li>
  </ol>
  
  <p>Pasted below is an image of the way I'd like to get the circles to display.</p>
  
  <p>Can anyone help, please?</p>
  
  <p><img src="https://i.stack.imgur.com/hYIUx.png" alt="3 circles"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="law-outer-circle" class="circle"&gt;&lt;div id="law-inner-circle" class="circle"&gt;Law firms&lt;/div&gt;&lt;/div&gt;   
  &lt;div id="industry-outer-circle" class="circle"&gt;&lt;div id="industry-inner-circle" class="circle"&gt;Industry&lt;/div&gt;&lt;/div&gt;
  &lt;div id="in-house-outer-circle" class="circle"&gt;&lt;div id="in-house-inner-circle" class="circle"&gt;In-house counsel&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.circle {
  border-radius: 50%;
  display: inline-block;
  margin-right: 20px;
  
  /* text styling */
  font-size: 45px;
  color: #FFF;
  line-height: 75px;
  text-align: center;
  font-family: Arial;
  }
  
  #industry-inner-circle {
  width: 250px;
  height: 250px;
  background: #DD4814;
  position: absolute;
  top: 24%; 
  left : 24%;
  display: block;
  border: 2px solid #fff;
  }
  
  #industry-outer-circle {
  background: #DD4814;
  width: 270px;
  height: 270px;
  position:relative;
  }
  
  #in-house-inner-circle {
  width: 250px;
  height: 250px;
  background: #AEA79F;
  position: absolute;
  top: 24%; 
  left : 24%;
  display: block;
  border: 2px solid #fff;
  }
  
  #in-house-outer-circle {
  background: #AEA79F;
  width: 270px;
  height: 270px;
  position:relative;
  }
  
  #law-inner-circle {
  width: 250px;
  height: 250px;
  background: #5E2750;
  position: absolute;
  top: 24%; 
  left : 24%;
  display: block;
  border: 2px solid #fff;
  }
  
  #law-outer-circle {
  background: #5E2750;
  width: 270px;
  height: 270px;
  position:relative;
  }
  </code></pre>