我试图用css在另一个圈子里面一个圈子,但是我有一个问题让它完全集中.我很近,但还没有.有任何想法吗？
<div id="content">
<h1>Test Circle</h1>
<div id="outer-circle">
<div id="inner-circle">
<span id="inside-content"></span>
</div>
</div>
</div>
这是我的CSS：
#outer-circle {
background: #385a94;
border-radius: 50%;
height:500px;
width:500px;
}
#inner-circle {
position: relative;
background: #a9aaab;
border-radius: 50%;
height:300px;
width:300px;
margin: 0px 0px 0px 100px;
}
另外,这是一个小提琴：
http://jsfiddle.net/972SF/
解决方法
大达！
在CSS说明中解释：
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div id="outer-circle"> <div id="inner-circle"> </div> </div>
