Comment faire pour centre le centre du cercle?
Comment faire pour centre le centre du cercle (CSS)? [Assumer dernière CSS3 prise en charge du navigateur.]
Doit maintenir v/h de centrage lors de parent l/h change de façon dynamique.
Serait expérimentale du Modèle de Boîte CSS spec de l'aide ici?
Grâce.
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;}
OriginalL'auteur DRAGON | 2013-03-15
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin pour donner à votre milieu conteneur approprié
padding
,Il va l'aider à mettre le contenu au centre.Vous pouvez obtenir le même en donnant un
left
c'est à dire faire de votre.middle
:Aussi, vous devez donner à votre enfant
div.circle
spécifiquewidth
etheight
combiné avecborder-radius
à aligner et à lui donner une forme de cercle.Et enfin, vous devez jouer avec la marge du cercle intérieur de l'aligner.
voir ce violon
au lieu de donner margin-top:8px, vous pouvez donner margin:7px, mais c'est la même chose. voir, la plupart de vos autres classes d'utilisation statique de la largeur, de sorte que son très gênant. en outre, les valeurs statiques que vous utilisez sont de très petites, je suppose, vous pouvez aller de l'avant avec cette
marquer comme réponse si cela vous a aidé 🙂
OriginalL'auteur Manish Mishra
Ce n'est pas la solution parfaite, mais cela fonctionne pour moi. Le centrage des balises qui DOIVENT être utilisés n'a pas changé quoi que ce soit ici, donc j'espère que quelqu'un va venir avec une meilleure solution.
OriginalL'auteur TimeWasterNL
Le centre du petit cercle à l'intérieur du grand, tout simplement, on l'utiliser sur
.circle .circle
:Vous alignez le cercle intérieur à l'horizontale à l'aide de
margin: auto
. Pour obtenir cette chose centrée verticalement calculer la marge du haut que la taille du cercle extérieur est fixe. C'est en fait comme ceci:Essayez avant d'acheter
Première réponse
Résout le centre du petit cercle à l'intérieur de la big one, même si le grand devient de plus
Si la taille de
parent
augmente, le grand cercle de l'échelle et de la petite on doit rester petit et dans le milieu. Est-ce exact? Ensuite, cela pourrait fonctionner - essayez de changer le parent largeur:Démo
[Les essayer avant de les acheter](http://jsfiddle.net/UhBLC/%5D
HTML
CSS
J'ai mis à jour ma réponse. L'espoir c'est ce que vous voulez. Vous pouvez maintenant changer la taille de la mère, mais les deux cercles sont centrés.
Oui. Mise à jour de votre réponse est presque là. (margin: auto;) a contribué à la centre choses à l'horizontale. Est-il une manière dynamique pour définir le cercle intérieur à la verticale mais plutôt que de (margin-top: 7px;)? Merci encore.
OriginalL'auteur insertusernamehere