Comment définir l'alignement horizontal en CSS : 1. Utilisez le style "text-align: center;" pour définir l'alignement central horizontal des éléments de texte ; l'alignement central horizontal des éléments de bloc.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
1. Utilisez l'attribut text-align: center;
text-align pour spécifier l'alignement horizontal du texte de l'élément.
Valeur de l'attribut :
left Disposez le texte vers la gauche. Par défaut : déterminé par le navigateur.
droite Dispose le texte vers la droite.
centre Disposez le texte au centre.
justify obtient l'effet d'aligner le texte aux deux extrémités.
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { text-align: center; border: 3px solid green; } </style> </head> <body> <h2>文本居中对齐</h2> <div class="center"> <p>文本居中对齐。</p> </div> </body> </html>
Rendu :
[Tutoriel recommandé :Tutoriel vidéo CSS ]
2. Utilisez l'attribut raccourci margin: auto;
margin pour définir tous les attributs de marge dans une seule instruction.
Valeur de l'attribut :
auto Le navigateur calcule les marges.
length spécifie la valeur de la marge dans des unités spécifiques, telles que les pixels, les centimètres, etc. La valeur par défaut est 0px.
% spécifie les marges en pourcentage de la largeur de l'élément parent.
Pour centrer horizontalement un élément (tel que
Régler sur la largeur de l'élément l'empêchera de déborder jusqu'au bord du conteneur. L'élément
précise la largeur et répartit uniformément les marges vides des deux côtés
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>元素居中对齐</h2> <div class="center"> <p>div 元素是居中的</p> </div> </body> </html>
Rendu :
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
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!