Comment aligner les zones de texte en HTML_Comment aligner les zones de texte en HTML-tutoriel HTML-php.cn

Comment aligner les zones de texte en HTML : 1. Alignement du texte ; 2. Utilisez la disposition Flexbox pour aligner ; 3. Utilisez la disposition en grille pour aligner ; 4. Utilisez la marge ou la position pour affiner.

Comment aligner les zones de texte en HTML

En HTML, l'alignement des zones de texte implique généralement des éléments en ligne (tels que des zones de texte créées par des balises ) ou des éléments de niveau bloc (tels que des éléments de conteneur tels que

ou < form> Le paramètre de style de la zone de texte à l’intérieur). Le HTML lui-même ne fournit pas de propriétés d'alignement direct, mais nous pouvons utiliser CSS (Cascading Style Sheets) pour obtenir divers effets d'alignement.

Voici quelques méthodes courantes pour aligner les zones de texte en HTML à l'aide de CSS :

1. Alignement du texte (éléments en ligne)

Pour les éléments en ligne (tels que ), nous nous concentrons généralement sur l'alignement de le contenu du texte, et non l'alignement des éléments eux-mêmes. Ceci peut être réalisé en définissant la propriété text-align. Cependant, veuillez noter que l'alignement du texte ne fonctionne que pour le contenu textuel à l'intérieur des éléments de niveau bloc, vous devez donc placer la balise à l'intérieur d'un élément de niveau bloc, tel que

Exemple :

<div style="text-align: center;">  
  <input type="text" placeholder="居中对齐的文本框">  
</div>

Copier après la connexion

Dans cet exemple, le texte (espace réservé) à l'intérieur de la zone de texte sera centré par rapport à l'élément

Cependant, veuillez noter que cette approche ne modifie pas la position de mise en page de l'élément lui-même sur la page, elle affecte uniquement l'alignement du texte interne.

2. Utiliser l'alignement de mise en page Flexbox

Flexbox est un modèle de mise en page moderne idéal pour aligner des éléments, y compris des éléments en ligne et des éléments au niveau du bloc. Vous pouvez obtenir l'alignement en définissant display: flex; et les propriétés d'alignement correspondantes (telles que justifier-content et align-items) sur l'élément parent.

Exemple :

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">  
  <input type="text" placeholder="使用Flexbox居中的文本框">  
</div>

Copier après la connexion

Dans cet exemple, l'élément

est défini comme un conteneur flexible et utilise justifier-content: center; et align-items: center; Centré verticalement. height: 100vh; Assurez-vous que le

occupe toute la hauteur de la fenêtre afin que la zone de texte soit centrée verticalement sur la page.

3. Aligner à l'aide de la disposition en grille

CSS Grid est un autre système de mise en page puissant qui peut également être utilisé pour aligner des éléments. Semblable à Flexbox, vous pouvez obtenir un alignement en définissant display: grid; et la propriété d'alignement correspondante sur l'élément parent.

Exemple :

<div style="display: grid; place-items: center;">  
  <input type="text" placeholder="使用Grid居中的文本框">  
</div>

Copier après la connexion

Ici, place-items: center; est un raccourci pour justifier-items: center; et align-items: center;, qui centre les éléments enfants horizontalement et verticalement dans le conteneur de grille.

4. Utilisez la marge ou la position pour un réglage précis

Dans certains cas, vous souhaiterez peut-être avoir un contrôle plus précis sur la position de la zone de texte. Cela peut être accompli en utilisant la propriété margin pour ajuster les marges de l'élément, ou en utilisant la propriété position en conjonction avec les propriétés top, right, bottom et left.

Exemple (en utilisant la marge) :

<div style="margin-left: auto; margin-right: auto; width: 50%;">  
  <input type="text" placeholder="使用margin居中的文本框">  
</div>

Copier après la connexion

Dans cet exemple, en définissant les marges gauche et droite sur auto et en définissant la largeur de

à l'intérieur) Centré horizontalement.

Exemple (en utilisant la position) :

<div style="position: relative; height: 100vh;">  
  <input type="text" placeholder="使用position定位的文本框" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">  
</div>

Copier après la connexion

Ici, l'élément parent est défini sur un positionnement relatif (position : relative ;) et la zone de texte est définie sur un positionnement absolu (position : absolue ;). Déplacez le coin supérieur gauche de la zone de texte vers le centre de l'élément parent via top: 50%; et left: 50%;, puis utilisez transform: translation(-50%, -50%); ce point, obtenant ainsi un effet de centrage.

Remarque :

Le choix de l'alignement dépend de vos besoins spécifiques et du contexte de mise en page.

Essayez d'éviter d'utiliser des styles en ligne et définissez plutôt des styles dans des fichiers CSS séparés pour une meilleure gestion et réutilisation.

Envisagez d'utiliser la réinitialisation du CSS ou de normaliser le CSS pour éliminer les différences de style par défaut entre les navigateurs.

Lorsque vous utilisez des technologies de mise en page modernes telles que Flexbox ou Grid, assurez-vous que votre navigateur cible prend en charge ces fonctionnalités ou fournissez des solutions de secours pour la compatibilité avec les anciens navigateurs.

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!

Étiquettes associées：

html 文本框 Centrer verticalement positionnement absolu attribut de position disposition en grille positionnement relatif

source：php.cn

Article précédent：Comment lire des fichiers texte en HTML Article suivant：Comment laisser deux espaces vides dans un paragraphe en HTML

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur