Question

我想把一个较小的圆圈放在另一个较大的圆圈内。（不完全是圆圈而是戒指。没关系......）两个圆圈应该在我的页面主体中垂直和水平居中。（就像它们有保存中心一样）
我的目标是制造一个雷达（类似这样的事情 - ＆gt; [http://media.photobucket.com/image/radar/scottb57/radarScreen-719485.jpg），但雷达中的环数将根据一些参数。
我应该玩z-index吗？

Answer 1

有一种方法可以在不为每个img个人img根据其大小做任何数学或硬编码位置的情况下执行此操作。

当然还有一个很大的权衡 - 标记要求每个div包含在2 img中。但是，每次添加（或删除）<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>  </div> </body> </html>时，您都不必更新CSS。

{{1}}

Answer 2

可能有更好的方法，但这是我见过和使用过的：

<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>

如何将中心圆放在另一个中？

2 个答案: