简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Comment aligner les zones de texte en HTML

百草
Libérer： 2024-03-27 16:33:39
original
1349 Les gens l'ont consulté

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!

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
Derniers numéros
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！