CODEWITHSUNDEEP
css
thikonom
thikonom

Reputation: 4267

How to place a centered circle inside an other?

I want to put a smaller circle inside an other bigger.(Not exactly circles but rings.Doesn't matter..)
Both circles should be centered vertically and horizontally in the body of my page.(as if they had the save center)
My goal is to make a radar(something like this-->[http://media.photobucket.com/image/radar/scottb57/radarScreen-719485.jpg) but the number of rings in the radar will be according to some parameters.
Should i play with z-index?

Upvotes: 0

Views: 1554

Answers (2)

system PAUSE
system PAUSE

Reputation: 38568

There's probably a better way to do it, but this is what I've seen and used:

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

Upvotes: 0

system PAUSE
system PAUSE

Reputation: 38568

There's a way to do this without doing any math or hardcoding positions for every individual img based on its size.

There's a big tradeoff, of course—the markup requires every img to be wrapped in 2 divs. But then you don't have to update the CSS every time you add (or remove) an 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>
         <!--
            etc.
         -->
      </div>
   </body>
</html>

Upvotes: 1

Related Questions