css - 如何将一个中心圆圈放在另一个圆圈内？-6ren

css - 如何将一个中心圆圈放在另一个圆圈内？

转载作者：行者123 更新时间：2023-11-27 22:38:16

我想把一个小圆圈放在另一个大圆圈里面。(不完全是圆圈，而是环。没关系..)
两个圆圈都应该在我的页面正文中垂直和水平居中。(就像它们有保存中心一样)
我的目标是制作一个雷达(像这样-->[ http://media.photobucket.com/image/radar/scottb57/radarScreen-719485.jpg )但是雷达中的环数将根据一些参数。
我应该使用 z-index 吗？

最佳答案

有一种方法可以做到这一点，而无需根据每个 img 的大小对位置进行任何数学计算或硬编码。

当然，这里有一个很大的折衷 — 标记要求每个 img 都包装在 2 个 div 中。但是这样一来，您就不必在每次添加(或删除)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>

关于css - 如何将一个中心圆圈放在另一个圆圈内？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1625926/

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何将一个中心圆圈放在另一个圆圈内？