CSS Centre Réactif DIV

Les "tuiles" (cases blanches) que vous voyez dans l'image 1 sont sensibles à l'écran utilisateurs. Si la taille de l'écran n'est tout simplement pas assez grand, il laisse un vide sur le côté droit. Ce que je veux faire est d'obtenir le résultat comme on le voit dans l'image 2. Voici mon code pour la mesure de ces éléments..

HTML:

<div class="main">
<div class="inner">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>
</div>

CSS:

.main{
width:100%;
background: #000;
}
.main .inner{
margin:10px;
min-width: 140px;
background: red;
}
.main .inner .tile{
margin:10px;
height: 120px;
width: 120px;
background: #fff;
display: inline-block;
}

IMAGE 1: CSS Centre Réactif DIV

IMAGE 2: CSS Centre Réactif DIV

Une seule grille de mise en page n'est pas en mesure de soutenir ce à l'heure actuelle. Pour une explication de pourquoi pas, voir cette réponse. Mais de multiples disposition des grilles de différentes tailles peuvent le prendre en charge, en utilisant les media queries pour choisir le droit basé sur la taille de l'écran, comme @axrwkr suggéré.

OriginalL'auteur Harry | 2013-04-06

  1. 7

    Vous pouvez le faire avec les media queries pour définir la largeur de la .inner classe à différents navigateur largeurs, puis définissez la margin-left et margin-right propriétés à auto au centre. Définir la padding-top et padding-bottom propriétés de la .main classe au lieu de définir des marges supérieure et inférieure sur la .inner classe. Utilisez une combinaison de padding sur le .inner classe et border sur le .tile classe à l'espace, les tuiles de manière égale de 10px à part.

    Pour une description détaillée des requêtes de média: CSS media queries

    exemple

    css

    .main{
width: 100%;
background: #000;
padding-top: 10px;
padding-bottom: 10px;
}
.main .inner{
padding: 5px;
font-size: 0px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: red;
}
.main .inner .tile{
margin: 0px;
padding: 0px;
border: 5px solid red;
height: 120px;
width: 120px;
background: #fff;
display: inline-block;
}

    Définir une requête de média pour chaque largeur du navigateur, dans cet exemple, j'ai seulement allé jusqu'à 800px, mais vous pouvez en ajouter autant plus que vous avez besoin.

    css (suite)

    @media (min-width: 280px) {
.main .inner{
width: 130px;
}
}
@media (min-width: 320px) {
.main .inner{
width: 260px;
}
}
@media (min-width: 480px) {
.main .inner{
width: 390px;
}
}
@media (min-width: 640px) {
.main .inner{
width: 520px;
}
}
@media (min-width: 800px) {
.main .inner{
width: 780px;
}
}

    Les media queries sont utilisés pour définir la largeur de .inner à un multiple de 130px qui est de la largeur d'une .tile avec une bordure de 10px.

    Si vous souhaitez modifier l'espacement entre les tuiles que vous auriez besoin de modifier le border sur le .tile classe, le padding sur le .inner classe, le margin-top et margin-bottom sur le .main classe et la width qui est spécifié dans chacune des requêtes de média.

    Cela peut être la seule CSS solution disponible à l'heure actuelle, en utilisant les media queries pour choisir une présentation différente des grilles basées sur la largeur du navigateur. Je pense que c'est soit ça ou le JavaScript.
    Merci beaucoup!

    OriginalL'auteur

  2. 0

    Vous pourriez max-width pour .inner alors text-align: center pour .main

    Est-il de toute façon à la dernière ligne alignée à gauche?

    OriginalL'auteur Willy Wonka

  3. 0
       .main .inner{
min-width: 140px;
background: red;
text-align:center;
}

    Ajouter text-align:center propriété css http://jsfiddle.net/dolours/afKgg/

    Est-il de toute façon à la dernière ligne alignée à gauche?

    OriginalL'auteur Dolo