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

通过css控制HTML文本框中的文字垂直居中详解

高洛峰
Libérer： 2017-03-06 17:11:23
original
2259 Les gens l'ont consulté

当定义了 Text 的 height 属性时，在 Text 中输入的文字都不是垂直居中的，不过可以通过css来控制它，下面有个不错的示例，大家可以参考下 当定义了 Text 的 height 属性时，在 Text 中输入的文字都不是垂直居中的，不过你可以添加CSS来控制它，让输入的文字垂直居中，使网页更完美。

代码如下:

<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> 
<table> 
<input type="text" id="text"> 
</table> 
</body> 
</html>
Copier après la connexion


加入 verticla-align、line-height 两个属性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必须要等于 height 。

更多通过css控制HTML文本框中的文字垂直居中详解相关文章请关注PHP中文网！

Étiquettes associées：
Centrer verticalement 文本框
source：php.cn
Article précédent：HTMLimg标签的alt属性和title属性使用介绍分析 Article suivant：html中设置让div中的内容超出后自动显示滚动条示例分析
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
Comment ajouter un caractère de nouvelle ligne (caractère de nouvelle ligne) dans un fichier XML ? J'ai un fichier XML et je souhaite remettre à la ligne le texte "SampleText123" ...
Depuis 2023-11-16 16:42:38
0
1
199
Augmenter la taille de téléchargement des fichiers dans la configuration Apache Bonjour à tous! Je suis aux prises avec ce problème de configuration car j'essaie d'augmen...
Depuis 2023-11-11 11:00:33
0
1
287
Titre : Obtenez une visibilité du texte blanc sur n'importe quelle couleur d'arrière-plan, à l'exception du blanc. L'utilisation de mix-blend-mode:Difference pour changer la couleur du texte en blanc fonct...
Depuis 2023-11-10 16:59:01
0
1
311
Quels sont les chiffres de performances à côté des composants dans les outils de développement Vue ? Quelqu'un a-t-il des informations ou des ressources pour une certaine fonctionnalité des o...
Depuis 2023-11-09 14:46:48
0
1
305
Utilisation de l'actif lame de Laravel 8 pour afficher des images mais chargement à partir du sous-dossier de ressources Je suis assez nouveau sur Laravel, alors soyez patient avec moi. Je copie un framework que...
Depuis 2023-11-09 12:47:02
0
1
314
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！