Wie-center den Mittelkreis?

Wie Mitte der Kreis in der Mitte (nur CSS)? [davon Ausgehen neuesten CSS3-browser-Unterstützung.]

Muss aufrechterhalten v/h Zentrierung wenn die übergeordnete B/h ändert sich dynamisch.

Würden die experimentellen CSS-Box-Modell-spec hier helfen?

Dank.

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

InformationsquelleAutor DRAGON | 2013-03-15

3

Müssen Sie Ihrem nahen container, entsprechende paddingEs wird helfen, bringen die Inhalte in den Mittelpunkt.

Können Sie erreichen das gleiche, indem Sie eine left d.h. Ihre .middle:
```
.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}
```
Auch, Sie zu geben Sie Ihrem Kind div.circle eine bestimmte width und height kombiniert mit border-radius zu richten und zu geben, es ist eine Form, die von Kreis.

Und schließlich müssen Sie spielen mit dem Rand des inneren Kreises zu richten.

sehen diese fiddle

Vielen Dank für deine schnelle Antwort. margin: auto; horizontal Zentren der beiden Kreise. Gibt es eine dynamische Möglichkeit, um den inneren Kreis? Eher als (margin-top: 8px;)? Nochmals vielen Dank. jsfiddle.net/dragontheory/LC5QL
anstatt margin-top:8px können Sie margin:7px, aber das ist dasselbe. sehen das die meisten anderen Klassen mit statischen Breite, so dass Ihr sehr lästig. außerdem werden die statischen Werte, die Sie verwenden, sind sehr klein, ich denke, Sie können weiter gehen mit
markieren Sie es als Antwort, wenn es dir geholfen 🙂

InformationsquelleAutor Manish Mishra
1

Es ist nicht die perfekte Lösung, aber es funktioniert für mich. Die Zentrier-tags, die verwendet werden SOLL hat sich nicht geändert, alles ist hier, so hoffe ich, dass jemand kommen mit eine bessere Lösung.
```
.circle .circle{
    width: 15px;
    height: 15px;
    margin-top: 15%;
}
```
InformationsquelleAutor TimeWasterNL
1

Zentrieren Sie den kleinen Kreis innerhalb des großen, die man einfach verwenden Sie diese auf .circle .circle:
```
margin-top: 7px;
```
Richten Sie den inneren Kreis horizontal mit margin: auto. Dieses Ding vertikal zentriert berechnen der oberen Grenze für die Größe des äußeren Kreises ist behoben. Es ist im Grunde so:
```
( outer circle (height) - inner circle (height + 2 x border) ) / 2
( 50 - 15 + 10 + 10 ) / 2 = 7.5px
```
Versuchen Sie bevor Sie kaufen

Erste Antwort

Löst um die Mitte der kleinen Kreis innerhalb des großen einen, selbst wenn der big one wird größer

Wenn das die Größe von parent erhöht, der große Kreis sollte Maßstab und die kleinen sollte man bleiben klein und in der Mitte. Ist das richtig? Dann dies könnte funktionieren - versuchen Sie, ändern Sie die übergeordnete Breite:

Demo

[Versuchen, bevor Sie kaufen](http://jsfiddle.net/UhBLC/%5D

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;
}
```
Danke für deine schnelle Antwort. Beide Kreis s w/h sind statisch, während .Eltern w/h sind dynamisch.
Ich aktualisiert meine Antwort. Hoffe, das ist, was Sie wollen. Sie können nun die Größe der Eltern, aber beide Kreise zentriert sind.
Ja. Ihre aktualisierte Antwort ist fast da. (margin: auto;) geholfen center Dinge, horizontal. Gibt es eine dynamische Möglichkeit, um den inneren Kreis vertikal, obwohl - eher als (margin-top: 7px;)? Nochmals vielen Dank.

InformationsquelleAutor insertusernamehere

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Erste Antwort