如何在另一个中放置一个居中的圆？

我想把一个较小的圆圈放在另一个较大的圆圈内（不完全是圆圈，但圆环。不要紧..）
两个圆圈都应该垂直和水平居中在页面的正文中（就好像它们有保存中心）
我的目标是制作一个雷达（如下所示 - > [http://media.photobucket.com/image/radar/scottb57/radarScreen-719485.jpg），但雷达中的环数将根据一些参数。
我应该玩Z指数？如何在另一个中放置一个居中的圆？

来源

2009-10-26 thikonom

哪个版本的CSS？ – dnagirl 2009-10-26 17:00:16

最新版本！无所谓我会将我的版本更改为您的答案！hehehehe – thikonom 2009-10-26 17:25:23

有可能是一个更好的方式来做到这一点，但是这是我见过和使用：

<html> 
    <head> 
     <style type="text/css"> 
     img { 
      /* this puts every img's upper-left corner in center of page */ 
      display: block; 
      position: absolute; 
      left: 50%; 
      top: 50%; 
     } 
     /* now move each img upwards and leftwards to center it */ 
     img#a { 
      /* this img is 206x42 */ 
      margin-left: -103px; 
      margin-top: -21px; 
     } 
     img#b { 
      /* this img is 84x90 */ 
      margin-left: -42px; 
      margin-top: -45px; 
     } 
     img#c { 
      /* this img is 12x20 */ 
      margin-left: -6px; 
      margin-top: -10px; 
     } 
     </style> 
    </head> 
    <body> 
     <img id="a" src="a.png"> 
     <img id="b" src="b.png"> 
     <img id="c" src="c.png"> 
    </body> 
</html>

来源

2009-10-26 17:05:37

谢谢师父！保存我的时间！ – thikonom 2009-10-26 17:48:02

有一个办法做到这一点没有做任何数学或硬编码位置基于每一个人img它的大小。

这里有一个很大的折衷，当然—标记要求每img被包裹在2 div s。但是，每次添加（或删除）img时，都不必更新CSS。

<html> 
    <head> 
     <style type="text/css"> 
     /** 
      * omit styles for 'div#i' if centering on page 
      */ 
     div#i { 
      position: relative; 
      /** 
      * set any positioning or sizing, just make 
      * sure that 'height' or 'min-height' is set 
      */ 
      height: 99.44%; 
     } 
     div#i>div { 
      /** 
      * for the outer div of each img, put its upper- 
      * left corner in the center (50%, 50%) of div#i 
      */ 
      position: absolute; 
      left: 50%; 
      top: 50%; 
     } 
     div#i>div>div { 
      /** 
      * the inner div of each img will be the same size 
      * as the img itself, so these 50% values refer to 
      * half the img width and height; move the center of 
      * this inner div to upper-left corner of outer div 
      */ 
      margin-left: -50%; 
      margin-top: -50%; 
      display: inline-block; 
     } 
     div#i>div>div>img { 
      /** 
      * this plus the above inline-block style will 
      * vertically center img within the inner div 
      * (normally it's baseline-aligned) 
      */ 
      vertical-align: middle; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="i"> 
     <div> 
      <div> 
       <img src="a.png"> 
      </div> 
     </div> 
     <div> 
      <div> 
       <img src="b.png"> 
      </div> 
     </div> 
     <div> 
      <div> 
       <img src="c.png"> 
      </div> 
     </div> 
     <!-- 
      etc. 
     --> 
     </div> 
    </body> 
</html>

来源

2009-10-26 19:48:57

如何在另一个中放置一个居中的圆？

回答

相关问题