3

中心円を中心にするにはどうすればよいですか (CSS のみ)?   [最新の CSS3 ブラウザーのサポートを前提としています。]

親 w/h が動的に変化する場合、v/h センタリングを維持する必要があります。

実験的な CSS Box Model 仕様はここで役立ちますか?

ありがとう。

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

4 に答える 4

3

あなたはあなたの真ん中の容器を適切に与える必要がありますpadding、それはコンテンツを中央に持ってくるのを助けます。

leftあなたはすなわちあなたを次のようにすることによって同じことを達成することができます.middle：

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

また、あなたはあなたの子供にそれを整列させそしてそれに円の形を与えるためにdiv.circle特定のwidthそしてheight結合されたものを与えなければなりません。border-radius

そして最後に、内側の円の余白を調整するために遊ぶ必要があります。

このフィドルを参照してください

于 2013-03-15T08:28:12.117 に答える
1

それは完璧な解決策ではありませんが、私にとってはうまくいきます。使用すべきセンタリングタグはここでは何も変更されていないので、誰かがより良い解決策を見つけてくれることを願っています.

.circle .circle{
    width: 15px;
    height: 15px;
    margin-top: 15%;
}
于 2013-03-15T07:54:50.793 に答える
1

小さな円を大きな円の中心に配置するには、次の on を使用します.circle .circle。

margin-top: 7px;

を使用して内側の円を水平に揃えますmargin: auto。このものを垂直方向に中央揃えにするには、外側の円のサイズも固定されているため、上部の余白を計算します。基本的には次のようになります。

( outer circle (height) - inner circle (height + 2 x border) ) / 2
( 50 - 15 + 10 + 10 ) / 2 = 7.5px

購入前にお試しください

最初の答え

大きな円が大きくなっても、小さな円を大きな円の中心に置くように解決します

のサイズがparent大きくなった場合、大きな円は拡大縮小し、小さな円は小さく中央にとどまる必要があります。あれは正しいですか？次に、これが機能する可能性があります-親の幅を変更してみてください:

デモ

[購入前に試す](http://jsfiddle.net/UhBLC/]

HTML

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

CSS

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

.circle {    
    display: table-cell;
    vertical-align: middle;
    background: blue;
    border-radius: 50%;
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

.tiny_circle {
    margin: auto;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: red;
}
于 2013-03-15T08:07:01.847 に答える