communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Trois façons de centrer verticalement du texte avec une largeur et une hauteur variables en divs

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
2300 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 empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Centrer l'alignement du DIV avec le contenu des deux côtés J'ai donc 5 éléments (dans le DIV contenant). La liste des éléments est la suivante : Text...
Depuis 2024-04-04 23:19:14
0
1
3438
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Titre du tableau pivoté verticalement, centré + aligné en bas, multi-navigateur J'ai un tableau avec des en-têtes pivotés qui ressemble à prévu dans Chrome, mais pas dans...
Depuis 2024-04-04 16:45:25
0
1
330
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