Comment aligner à gauche la dernière ligne dans une grille de blocs en ligne centrée ?

Dernière ligne alignée à gauche dans une grille d'éléments centrée

Problème :

Une grille d'éléments configurée pour s'afficher inline-block est centré horizontalement, mais la dernière ligne n'est pas alignée à gauche. Au lieu de cela, elle est centrée comme les autres lignes.

Solution avec display inline-block :

Cette grille adaptative est plus simple à mettre en œuvre et s'adapter.

Exemple :

<div>

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

Explication :

• Le conteneur grille (# conteneur) est centré en utilisant margin: 0 auto.
• Les blocs sont configurés pour afficher : inline-block et ont des largeurs et des marges égales.
• La largeur du conteneur est ajustée via des requêtes multimédias pour maintenir un alignement centré sur différentes tailles d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!