如何在另一箇中放置一個居中的圓？

我想把一個較小的圓圈放在另一個較大的圓圈內（不完全是圓圈，但圓環。不要緊..）
兩個圓圈都應該垂直和水平居中在頁面的正文中（就好像它們有保存中心）
我的目標是製作一個雷達（如下所示 - > [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

如何在另一箇中放置一個居中的圓？

回答

相關問題