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

文本如何做到垂直居中对齐_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:31:22
original
1552 Les gens l'ont consulté

文本如何做到垂直居中对齐:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
网页布局中经常用到让文本在一行中垂直居中对齐。默认情况下文本是居上对齐的。
实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest {  width: 200px;  height: 40px;  line-height: 40px;  border: 1px solid blue;}</style></head><body><div class="mytest">大家好，我要居中对齐</div></body></html>
Copier après la connexion

以上代码可以将div中的文本垂直居中对齐，对齐的方法就是把div的height属性值和line-height的属性值设为相等即可达到文本垂直居中效果，上面代码中两个属性值都设置为40px。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4762

更多内容可以参阅:http://www.softwhy.com/divcss/

Étiquettes associées：
文本如何做到垂直居中对齐
source：php.cn
Article précédent：兼容所有浏览器的圆角矩形效果代码实例_html/css_WEB-ITnose Article suivant：CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose
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 intégrer une vidéo d'arrière-plan en HTML/CSS ? Bonjour à tous, j'ai récemment rencontré un problème. J'essaie de définir un arrière-plan ...
Depuis 2023-11-06 13:59:13
0
1
240
Comment centrer verticalement le texte à côté d'un interrupteur ? Je veux créer un texte au centre de la classe "toggle-label" verticalement avec ...
Depuis 2023-09-15 11:58:54
0
1
206
Pourquoi lors de l'alignement vertical d'un élément de bouton dans un div, l'élément a plus d'espace vertical que celui défini par les marges CSS ? J'ai une page de travail en cours sur ce site et je pensais que la partie la plus difficil...
Depuis 2023-09-14 18:49:41
0
2
252
Comment centrer la dernière ligne d'éléments dans une grille à l'aide de Tailwind CSS ? J'ai du mal à essayer d'utiliser Tailwind (en utilisant React) pour aligner mon projet fin...
Depuis 2023-08-28 20:06:09
0
1
195
Comment donner à PHP l'autorisation d'écriture sur un répertoire ? J'essaie de créer un fichier en utilisant PHP mais cela ne fonctionne pas. Je suppose que ...
Depuis 2023-08-27 15:25:11
0
2
310
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！