How to center the center circle?


Tags: css3,vertical-alignment,centering,alignment

Problem :

How to center the center circle (CSS only)?   [Assume latest CSS3 browser support.]

Must maintain v/h centering when parent w/h changes dynamically.

Would the experimental CSS Box Model spec help here?

Thanks.

http://jsfiddle.net/dragontheory/VdJFa/5/

<div class="parent">
    <div class="middle">
        <div class="circle">
            <div class="circle"></div>
        </div>
    </div>
</div>

.parent         {display: table; 
                margin: 50px auto;
                background: lightgray;
                height: 100px;
                width: 100px;}

.middle         {display: table-cell; 
                vertical-align: middle;}

.circle         {margin: auto;
                border: solid 10px blue;
                border-radius: 50%;
                opacity: 0.3;
                width: 50px;
                height: 50px;}

.circle .circle {width: 15px;
                height: 15px;}


Solution :

You need to give your middle container, appropriate padding,It will help bringing the content to the center.

You can achieve the same by giving a left i.e. making your .middle as:

.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

Also, you have to give your child div.circle a specific width and height combined with border-radius to align it and to give it a shape of circle.

And finally you need to play with the margin of the inner circle to align it.

see this fiddle


    CSS Howto..

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to make commandeButon to vertical align?

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

    How to hide the third nested list in this css dropdown nested lists?

    How to get rid of scrollbars around iframe

    How to shift element upwards to it's variable height using css

    How should I organize the contents of my CSS file(s)?

    How to position the GWT dialog to the bottom right corner of the browser?

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How to style five rows with alternating fixed/variable width?

    How to change the css class name dynamically in angular 2

    how does responsive design work?

    How to make image hover in css?

    jquery - how to change the display css attribute of a button within a li on hover

    DropDown Menu won't show for more than a second..not working.

    how i can select some attribute value from in line css

    Show image when hovering on a span

    How to make circle by using HTML CSS only?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How can we wrap the line based on border size of windows browser?

    how to keep the css style after inserting a row to table by jquery

    how can I set my gradient background in css for full width and height of the page?

    How do I keep floated child divs from wrapping?

    How to use media queries for mobile devices and desktop?

    How to apply effect just to background image and not text

    How to animate text with css font-weight property in jQuery ? normal to bold

    How can I set inline css styles for an element with javascript?

    How to fix this CSS 3 code to make it working properly on the server?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]