Comment centrer verticalement un élément à l'intérieur de son parent à l'aide de CSS ?-tutoriel CSS-php.cn

Comment centrer verticalement un élément à l'intérieur de son parent à l'aide de CSS ?

Barbara Streisand

Libérer： 2024-12-22 05:00:10

original

223 Les gens l'ont consulté

How Do I Vertically Center a Inside Its Parent Using CSS?

Centrage vertical d'un

au sein d'un élément parent à l'aide de CSS

Vous recherchez des conseils pour aligner verticalement un élément

au sein de son élément parent. Dans les navigateurs modernes, flexbox offre une solution idéale.

</p>
<h1>Connexion {</h1>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: flex;
align-items: center;

Copier après la connexion

}

Cette approche centre le

verticalement dans l'élément parent #Login.

Pour les navigateurs sans support flexbox, des méthodes alternatives sont nécessaires. Envisagez de mettre en œuvre une solution de secours.

Lecture recommandée

Développez vos connaissances avec ces ressources :

[Prise en charge du navigateur pour flexbox](https ://caniuse.com/#feat=flexbox)
[Un guide pour Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[Utiliser des boîtes flexibles CSS](https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_Flexible_Box_Layout)

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!

source：php.cn

Article précédent：Pourquoi le « trigger('click') » de jQuery ne fonctionne-t-il pas sur les entrées de fichiers cachés et comment puis-je y remédier ? Article suivant：Comment empêcher l’expansion des cellules d’un tableau en raison d’un texte long ?

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

2304

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

2434

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

2049

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...