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

Trois façons de centrer verticalement du texte avec une largeur et une hauteur variables en divs

高洛峰
Libérer： 2017-03-31 10:57:33
original
2212 Les gens l'ont consulté

On m'a demandé lors d'un entretien : Comment centrer verticalement un texte à largeur et hauteur variables ?

Maintenant, pour résumer :

Écrivez la structure dans le corps

main">
< id="login">
djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.
> ;

Méthode 1 :

#main{


position: relative; //Utiliser le positionnement relatif dans l'élément parent
width : 200px;
hauteur: 200px;
débordement: caché;
couleur de fond: #ff0;
padding : 10px;}
#login{
position : absolue ; /*Utiliser le
positionnement absolu*/
top dans les éléments enfants :50%; /*La distance est 50% supérieure à l'élément parent*/

left:50%;

background-color: #eee ;

-webkit-transform:translate(-50%,-50%); /*Style CSS3, :translate(-50%,-50%) est relatif à -50% de sa distance par rapport à l'axe x et y -axis */
}

Méthode 2 :

#main{

largeur : 200px;
hauteur : 200px;
couleur de fond : #eee;

display: table; /* Que l'élément label soit présenté sous la forme de table*/}
#login{
display: table -cell; /* Ni ie7 ni ie6 ne reconnaissent display: table-cell;*/

vertical-align: middle;}

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：
垂直居中 div
source：php.cn
Article précédent：Explication détaillée de la méthode de conversion entre les éléments de bloc et les éléments en ligne Article suivant：Introduction détaillée aux questions fréquemment posées sur la navigation multiple CSS
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
Réécrivez le titre comme suit : Vue 3 : Transférer le contenu vers l'élément et remplacer J'utilise la téléportation de Vue3 pour restituer un élément dans un div et cela fonctionn...
Depuis 2023-11-06 11:01:38
0
1
451
NUXT 3 : Comment utiliser le middleware de routage dans la mise en page ? (Puis-je?) J'ai cherché à utiliser le middleware Nuxt dans la mise en page. Mais je ne sais pas si c'...
Depuis 2023-10-26 12:57:37
0
2
308
Comment faire en sorte que la dernière ligne d'éléments occupe l'espace restant dans la grille CSS ? Existe-t-il un moyen de forcer tous les éléments de la dernière ligne de la grille à rempl...
Depuis 2023-10-20 20:39:37
0
1
321
Erreur d'hydratation React dans Next.js - "Le code HTML du serveur devrait contenir la balise <a> correspondant à la balise <a>" Je travaille sur un projet Next.js et je reçois toujours une erreur d'hydratation. Le mess...
Depuis 2023-09-19 16:55:20
0
1
313
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！