Alignement CSS (Alignement)

CSS a plusieurs attributs utilisés pour aligner les éléments web.

Alignement du texte

Il est possible d'aligner correctementAlignement du texte，pour alignerBlocLe texte à l'intérieur de l'élément.

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　left;
}

VoirTexte CSSTutoriel, pour en savoir plus sur le formatage du texte.

Aligner au centre en utilisant la propriété margin

BlocL'alignement central de l'élément est l'un des principaux sens de la propriété margin CSS. Par exemple, en définissant les marges latérales sur auto, on peut aligner horizontalement le conteneur <div>.

div　{
　　　　width:　50%;
　　　　margin:　0　auto;
}

Les règles de style de l'exemple ci-dessus alignent horizontalement les éléments.

Aligner les éléments en utilisant l'attribut position

CSS positionEn combinaison avec left, right, top et bottom, l'attribut position permet d'aligner un élément par rapport à la fenêtre de visualisation du document ou à l'élément parent.

.up　{
　　　　position:　absolute;
　　　　top:　0;
}
.down　{
　　　　position:　absolute;
　　　　bottom:　0;
}

Pour en savoir plus sur l'élément positionné, voirPositionnement CSSTutoriel.

Aligner à gauche ou à droite en utilisant l'attribut float

CSSfloatL'attribut peut être utilisé pour aligner les éléments de son conteneur à gauche ou à droite de manière à ce que le contenu autre puisse glisser le long de son côté.

Par conséquent, si un élément flotte à gauche, le contenu glisse le long de son côté droit. À l'inverse, si un élément flotte à droite, le contenu glisse le long de son côté gauche.

div　{
　　　　width:　200px;
　　　　float:  left;
}

Effacer les flottants

L'un des aspects les plus perplexants de l'utilisation d'un layout flottant est le parent replié. L'élément parent ne s'étend pas automatiquement pour contenir l'élément flottant. Cependant, si le parent ne contient aucune arrière-plan ou bordure visuellement perceptible, cela n'est pas toujours évident, mais il est important de le noter et de le traiter pour éviter des mises en page étranges et des problèmes de navigateur. Voir l'image ci-dessous :

Vous verrez

Les éléments ne s'étendent pas automatiquement pour contenir les images flottantes. Vous pouvez résoudre ce problème en nettoyant le flottement après l'élément flottant dans le conteneur, mais avant la balise de fermeture de l'élément conteneur.

Correction des parents collés

Il y a plusieurs méthodes pour résoudre le problème des parents CSS collés. La section suivante vous présentera ces solutions ainsi que des exemples en temps réel.

Solution1：Flottant le conteneur

La méthode la plus simple pour résoudre ce problème consiste à flotter l'élément parent conteneur.

.container  {
　　　　float:  left;
　　　　background:  #f2f2f2;
}

Solution2：Utiliser un Div vide

C'est une méthode ancienne, mais c'est une solution simple qui peut être utilisée dans tous les navigateurs.

.clearfix  {
　　　　clear:  both;
}
/*　html  extrait de code　*/

Vous pouvez également le faire via les balises, mais il est déconseillé d'utiliser cette méthode car elle ajoutera du code non sémantique dans les balises.

Solution3：Utiliser l'élément pseudo :after

La :after Éléments pseudoet conjointscontentLes propriétés ont été utilisées de manière assez large pour résoudre les problèmes de calcul flottant.

.clearfix:after  {
　　　　content:  ".";
　　　　display:  block;
　　　　height:  0;
　　　　clear:  both;
　　　　visibility:  caché;
}

La classe .clearfix est applicable à tout conteneur ayant des descendants flottants.