Centre de plusieurs éléments à l'intérieur de la div à l'aide de css

Je suis nouveau sur le html et le css et je suis en train de créer un site web, une partie du code est ici:

HTML:

<div class="row">
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
</div>

CSS:

.circle
{
border-style: solid;
border-color: red;
width: 70px;
border-radius: 40px;
float:left;
margin: 2px;
}

.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
}

http://jsfiddle.net/ubd9W/

Je suis en train de centre les cercles rouges (horizontalement et verticalement) dans les boîtes noires, mais je n'arrive pas à le gérer. J'ai essayé d'utiliser 'text-align' et le réglage de la marge de gauche et droite pour auto mais qui ne fonctionne pas. Je ne peux pas utiliser "absolue" positionnement " parce que j'ai un fixe barre de menu en haut de la page et ça devient ruiné si vous faites défiler.

Toute aide sera grandement appréciée. Grâce

pourquoi ne pas utiliser une image de 70x70 au lieu d'utiliser les css pour faire le cercle?
pourquoi voudriez-vous utiliser les images, si vous pouvez vous le css?

OriginalL'auteur sooty1892 | 2013-08-26

  1. 10

    très simple à comprendre avec le même code que vous fournissez, vous avez juste besoin de donner à l'élément parent d'un text-align:center; et un position:relative;

        .row{
        border:4px solid black;
        height: 100px;
        width: 700px;
        margin: 10px;
        text-align:center;
        position:relative;
    }

    puis définissez les enfants margin:10px auto; et display:inline-block; 

        .circle{
        border:4px solid red;
        height: 70px;
        width: 70px;
        border-radius: 40px;
       position:relative;
        margin:10px auto;
       display:inline-block;
    }

    ou si vous voulez plus de marge d'entre eux pour changer margin:10px auto; à margin: 10px 40px;

    démo: http://jsfiddle.net/ubd9W/14/

    OriginalL'auteur Gildas.Tambo

  2. 0

    Je ne pense pas que vous pouvez le faire uniquement avec du CSS, sans coder en dur les valeurs.

    Vous pouvez utiliser flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ (pas très bonne prise en charge du navigateur) ou une solution d'activer JavaScript.

    EDIT:

    Je suis en utilisant jQuery.

    pour trois cercles:

    var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
var equalSpace = rowWidth -  (3*circleWidth);
jQ('.row').css("padding-left", equalSpace + "px").css("padding-right", equalSpace + "px");

    dynamique pour un certain nombre de cercles:

    var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
jQuery('.row').each(function(){
    var circNumber = jQuery(this).children('.row').length; //this will give you the number of circles inside the current row.
    var thisWidth = rowWidth - (circNumber * circleWidth);
    jQ(this).css('padding-left', thisWidth + "px").css('padding-right', thisWidth + "px")
})

    Nous parcourir toutes les lignes et de voir comment de nombreux cercles que nous avons en eux et de se multiplier theyr nombre à un cercle en largeur afin de nous peut la soustraire la gauche/droite rembourrage.

    merci, avez-vous une idée de comment cela pourrait être fait en javascript?
    Modifié la réponse.

    OriginalL'auteur Arthur Kovacs

  3. 0

    à l'aide de flexbox, c'est de loin la meilleure option, mais il est maintenant pris en charge par ie<10 http://caniuse.com/#feat=flexbox

    Si vous en avez besoin pour fonctionner sur les navigateurs qui ne supportent pas flexbox, l'alignement horizontal est facile, vous pouvez le faire en ajoutant les attributs display: inline .cercle et text-align: center sur .ligne.

    http://jsfiddle.net/BTh2t/2/

    .circle
{
    border-style: solid;
    border-color: red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
    display: inline-block;
    margin: 2px;
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    width: 700px;
    margin: 10px;
    text-align: center;

}

    Pour l'alignement vertical, je pouvais le faire fonctionner à l'aide de pourcentages pour la hauteur du cercle et j'ai changer de box-sizing de la propriété et de la marge supérieure et inférieure, de sorte que le pourcentage attribué un sens et affecter la position par rapport à la classe circle donc on peut utiliser le haut de la propriété à l'aide de la moitié du pourcentage restant ex:
    cercle hauteur = 70%,
    cercle top = 15%

    http://jsfiddle.net/BTh2t/3/

    .circle
{
    border-style: solid;
    border-color: red;
    height: 70%;
    width: 70px;
    border-radius: 40px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    position: relative;
    top: 15%;
    -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    width: 700px;
    margin: 10px;
    text-align: center;

}

    gardez à l'esprit que, avec cette approche, si vous augmentez la hauteur de l' .ligne classe de la hauteur du cercle augmentera automatiquement.

    J'espère que cela aide!

    OriginalL'auteur jfplataroti

  4. 0

    Une solution simple avec le display:table bien ainsi:

    HTML

    <div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>

    CSS à ajouter:

    .wrapper {
    display: table;
    margin: auto;
}

    Lien pour Violon

    OriginalL'auteur Will

  5. 0

    Pour l'alignement horizontal: utilisation text-align: center; + display:inline-block;

    Pour l'alignement vertical: utilisation line-height + vertical-align: middle;

    VIOLON

    CSS

    .circle
{
    border-style: solid;
    border-color: red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
    margin: 2px;
    display:inline-block; /* for horizontal alignment */
    vertical-align: middle; /* for vertical alignment */
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    line-height: 100px; /* for vertical alignment */
    width: 700px;
    margin: 10px;
    text-align: center; /* for horizontal alignment */
}

    OriginalL'auteur Danield