Using CSS to generate inner and outer circles - html

Question

Following the guide here, 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 here.
I'd like to:
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.
get the text to line up correctly so that it's centred vertically and horizontally in the inner circle
get all three of the circles on the same horizontal line.
Pasted below is an image of the way I'd like to get the circles to display.
Can anyone help, please?
HTML:
<div id="law-outer-circle" class="circle"><div id="law-inner-circle" class="circle">Law firms</div></div>
<div id="industry-outer-circle" class="circle"><div id="industry-inner-circle" class="circle">Industry</div></div>
<div id="in-house-outer-circle" class="circle"><div id="in-house-inner-circle" class="circle">In-house counsel</div></div>
CSS:
.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;
}

Answer 1

You could do it in this way using css box-shadow property.
Html
<div class="circle color-1 color1-box-shadow">
industry
</div>
<div class="circle text color-2 color2-box-shadow">
In-house legal counsel
</div>
<div class="circle color-3 color3-box-shadow">
Law Firms
</div>
Css
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 250px;
height: 250px;
color: #FFF; border: 2px solid #fff;
line-height: 250px;
text-align: center;
font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.text { line-height: 45px; padding-top: 50px; height: 200px }
Example

Answer 2

Give .circle { line-height: 250px; } (same as your inner circle height) and change inner circle top and left values to 8px
(outerCircleHeight - innerCircleHeight - bothSidesBorder / 2 = 8).
#industry-inner-circle {
top: 8px;
left : 8px;
}
jsfiddle example