communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本_html/css_WEB-ITnose

垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:38:41
original
1244 Les gens l'ont consulté

声明：来自http://www.imooc.com/learn/9 学习

父元素高度确定的单行文本的竖直居中

是通过设置父元素的 height 和 line-height 高度一致来实现的。

.container{    height:100px;    line-height:100px;    background:#999;}
Copier après la connexion

父元素高度确定的多行文本

使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

<body><table><tbody><tr><td class="wrap"><div>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>
Copier après la connexion

table td{height:500px;background:#ccc}
Copier après la connexion

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

<div class="container">    <div>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>    </div></div><style>.container{    height:300px;    background:#ccc;    display:table-cell;/*IE8以上及Chrome、Firefox*/    vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>
Copier après la connexion

 

Étiquettes associées：
垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本
source：php.cn
Article précédent：使用checkbox实现纯CSS下拉框_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
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2328
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2465
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2083
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1961
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2036
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