Comment les tableaux peuvent-ils résoudre le défi du centrage vertical CSS ?-tutoriel CSS-php.cn

Comment les tableaux peuvent-ils résoudre le défi du centrage vertical CSS ?

Mary-Kate Olsen

Libérer： 2024-11-29 14:49:11

original

1036 Les gens l'ont consulté

How Can Tables Solve the Challenge of CSS Vertical Centering?

Centrage vertical CSS : lorsque les tables règlent

Centrage vertical d'un

dans un autre

peut être un défi en CSS. Les méthodes traditionnelles telles que « top : 50 % » et « vertical-align : middle » s'avèrent souvent inefficaces.

L'utilisateur rencontrant ce problème le confronte à un

sans hauteur fixe. Bien que les tableaux soient souvent ignorés pour la mise en page, ils excellent dans le centrage vertical et la gestion de contenu côte à côte.

Centrage vertical basé sur un tableau

Par exemple, les éléments suivants Le code HTML et CSS démontre le centrage vertical à l'aide de tableaux :

<table>

Copier après la connexion

#outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
#inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%; }

Copier après la connexion

Cette solution est fiable et largement pris en charge.

Les inconvénients du centrage vertical CSS pur

Le centrage vertical CSS pur implique souvent des techniques complexes telles que des divs imbriqués avec un positionnement relatif et absolu. Ces méthodes peuvent être lourdes et sujettes à des bugs.

Astronautes CSS contre pragmatistes

Certains développeurs préconisent des mises en page CSS pures, même lorsque les tableaux offrent une solution plus simple et plus efficace. solution. Cette recherche de la perfection CSS peut conduire à une ingénierie excessive et à une efficacité réduite.

Conclusion

Bien que CSS soit un outil puissant, il a des limites. Pour les configurations complexes à centrage vertical avec des hauteurs variables, les tables restent une option viable. Le pragmatisme doit prévaloir sur le dogme et les développeurs doivent employer la solution la plus adaptée à leurs besoins.

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 flotteur ne fonctionne-t-il pas dans les conteneurs Flex ? Article suivant：Pourquoi mes boutons sont-ils rembourrés différemment dans Firefox ?

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

2539

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

2686

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

2267

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