使用CSS生成内部和外部圆

Question

遵循指南here，我一直在使用CSS生成圆圈。我已经完成了基础知识，但是我试图让一个CSS生成的圆圈叠加在另一个圆圈上。我的小提琴是here。

我想：

1. 调整包含文本的内部圈子的定位 - 我无法得到它列队正确的外圈。这个想法是，每个圆圈将由一个外圆和一个内圆组成，每个内圆将包含适当的文字。
2. 使文本正确排列，使其在内部圆中垂直和水平居中
3. 在同一水平线上获取所有三个圆。

下面粘贴的是我想让圆圈显示的图像。

任何人都可以帮忙吗？

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

你可以使用CSS box-shadow财产做这样。

的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

给.circle { line-height: 250px; }（同您的内圆高度）和变更内圆top和left值以8像素 （outerCircleHeight - innerCircleHeight - bothSidesBorder/2 = 8）。

#industry-inner-circle { 
    top: 8px; 
    left : 8px; 
} 

jsfiddle example