如何使圆心居中？ [英] How to center the center circle?

问题描述

如何使中心圆居中（仅CSS）？ [假定最新的CSS3浏览器支持。]

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

当父w / h动态变化时，必须保持v / h居中。

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

实验性CSS Box Model规范在这里有帮助吗？

Would the experimental CSS Box Model spec help here?

谢谢。

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

推荐答案

您需要给您的中间容器适当的填充，它将有助于将内容带到中心。

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

您可以实现通过给出左相同，即将您的 .middle 设置为：

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

此外，您还必须给孩子 div。圈出特定的宽度和高度并结合边界半径使其对齐并使其具有圆形形状。

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.

请参见< a href = http://jsfiddle.net/manishmishra256/VdJFa/14/ rel = nofollow>小提琴

这篇关于如何使圆心居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！