Comment centrer une zone de texte en HTML

Comment centrer la zone de texte HTML, vous avez besoin d'exemples de code spécifiques

Dans la conception Web, l'alignement central des éléments est une exigence de mise en page courante. Pour les zones de texte HTML, il existe plusieurs façons de les faire apparaître centrées. Ce qui suit vous présentera en détail une méthode de centrage couramment utilisée et joindra des exemples de code spécifiques.

Méthode 1 : Utilisez l'attribut centrage dans la feuille de style CSS

Pour obtenir l'affichage centré de la zone de texte, vous pouvez utiliser l'attribut text-align dans la feuille de style CSS. Définissez simplement l’élément du conteneur parent où se trouve la zone de texte sur l’alignement central.

Tout d'abord, définissez un style CSS dans l'en-tête du document HTML ou dans une feuille de style externe. Un exemple est le suivant :

<style>
    .container {
        text-align: center;
    }
</style>

Ensuite, dans la partie corps du document HTML, placez la zone de texte qui doit être centrée dans un élément conteneur. L'exemple de code est le suivant :

<div class="container">
    <input type="text" name="textbox" />
</div>

Dans l'exemple ci-dessus, la zone de texte est placée à l'intérieur d'un élément div et le nom de classe du div est défini sur "conteneur". Dans le style CSS correspondant au nom de la classe, l'attribut text-align est défini sur center, c'est-à-dire un alignement centré.

De cette façon, la zone de texte sera affichée horizontalement et centrée dans le conteneur parent.

Méthode 2 : utilisez l'attribut margin dans la feuille de style CSS

Une autre méthode de centrage couramment utilisée consiste à ajouter des marges à la zone de texte. En définissant les marges gauche et droite sur « auto », la zone de texte peut être automatiquement centrée horizontalement.

L'exemple de code est le suivant :

<style>
    .container {
        width: 300px; /* 设置容器的宽度 */
    }

    .textbox {
        margin-left: auto;
        margin-right: auto;
    }
</style>

Dans l'exemple ci-dessus, la largeur est d'abord définie dans le style CSS du conteneur. Ensuite, définissez margin-left et margin-right sur auto dans le style CSS de la zone de texte, ce qui signifie que les marges gauche et droite sont automatiquement allouées, afin que la zone de texte soit affichée horizontalement et centrée dans le conteneur.

Ensuite, dans la partie corps du document HTML, placez la zone de texte dans l'élément conteneur défini avec le nom de classe conteneur. L'exemple de code est le suivant :

<div class="container">
    <input type="text" name="textbox" class="textbox" />
</div>

En ajoutant un style CSS avec le nom de classe "textbox" à la zone de texte, la zone de texte peut être automatiquement centrée.

Voici deux méthodes courantes, simples et pratiques pour centrer les zones de texte HTML. En fonction de la situation réelle, sélectionnez-en un ou utilisez-les en combinaison pour obtenir l'effet de centrage de la zone de texte.

Veuillez noter que le code dans l'exemple ci-dessus est uniquement à titre de référence et peut être modifié et ajusté en fonction de vos besoins spécifiques lors de l'utilisation réelle.

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!