Maison > interface Web > tutoriel HTML > Comment centrer le texte de haut en bas en HTML

Comment centrer le texte de haut en bas en HTML

藏色散人
Libérer: 2022-12-30 11:12:31
original
45085 Les gens l'ont consulté

Comment centrer le texte vers le haut et vers le bas en HTML : créez d'abord un exemple de fichier HTML ; puis créez une zone de texte ; puis définissez l'attribut de hauteur de Text et enfin implémentez le texte via des attributs tels que " vertical-align : middle;" en CSS Centrez-le simplement de haut en bas.

Comment centrer le texte de haut en bas en HTML

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.

Recommandé : Tutoriel vidéo CSS

Laissez le texte dans la zone de texte en HTML être centré verticalement

Lorsque vous définissez faites-le vous-même Lorsque l'attribut height de Text est désactivé, le texte saisi dans Text n'est pas centré verticalement. Cependant, vous pouvez ajouter du CSS pour le contrôler afin que le texte saisi soit centré verticalement, ce qui rend la page Web plus parfaite

<html>
<head>
<style type="text/css">
    #text {
        height:20px;
        vertical-align:middle;
        line-height:20px;  /*line-height must be equal to height*/  
    }
</style>
</head>
<body>
    <div>
        <input type="text" id="text">
    </div>
</body>
</html>
Copier après la connexion
<.>Ajouter verticla-align Après avoir ajouté les deux attributs line-height et line-height, le texte dans la zone de texte sera centré verticalement dans la zone de texte. Il convient de noter que la hauteur de la ligne doit être égale à la hauteur.

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal