CSS vertical aligner

Cette exception est une chose d'une quirk - cela ne devrait vraiment pas exister. Les concepteurs CSS le mettent là-bas afin de permettre à CSS de reproduire l'attribut Valign d'éléments de table, couramment utilisés par les concepteurs dans les jours sombres des mises en page à base de table.

Pour d'autres éléments, alignant le contenu d'une boîte verticalement au milieu de la situation peut être un peu de beaux-arts. Il existe plusieurs techniques:

1. Pour les lignes simples de texte, faites simplement la la hauteur de ligne identique à la hauteur de la boîte entière. Vous n'avez probablement pas besoin de vertical-align pour cela.

2. Utilisez Affichage: Cellule de table; Pour simuler l'élément simuler une cellule de table, puis utilisez vertical-align . Cela fonctionne, mais peut avoir des conséquences inattendues (il existe d'autres attributs de cellules de table que vous ne voudrez peut-être pas simuler).

3. Si vous connaissez la hauteur de l'élément, vous souhaitez aligner verticalement, vous pouvez la positionner à 50% moins la moitié de sa hauteur, comme celle-ci: XXX

   Il y en a quelques autres, mais ceux-ci devraient vous aider à démarrer.

   espère que cela aide.

   ---

   0 commentaires

   ---

   1
   votes

   JavaScript serait probablement le meilleur meilleur pour obtenir l'image centrée dans le centre vertical pour chaque cas. Si vous pouvez utiliser une bibliothèque comme JQuery, ce n'est que quelques lignes de code.

   $(function(){
       var containerHeight = $('#container').outerHeight();
       var imgHeight = $('#logo img').outerHeight();
   
       var difference = (containerHeight - imgHeight)/2;
       $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});
   

   ---

   2 commentaires

   Il a donc besoin d'inclure la bibliothèque de JQUERY complète, ainsi que ce script? Semble un peu de surenche juste pour centrer quelque chose.

   ---

   S'il doit centrer quelque chose de plus que quelques fois et s'il ne connaissait pas une) quelle est la hauteur du parent div est, et b) quelle est la hauteur de l'image, cela fonctionnera à chaque fois, et dans tous les cas

   ---

   ---

   4
   votes

   Pour une solution plus moderne (IE8 +) qui n'utilise pas de tables, j'aime Celui-ci meilleur.

   <style>
   /* Can be any width and height */
   .block {
     height:500px;
     text-align: center;
   }
   
   /* The ghost, nudged to maintain perfect centering */
   .block:before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     margin-right: -0.25em; /* Adjusts for spacing */
   }
   
   /* The element to be centered, can be any width or height */ 
   .centered {
     display: inline-block;
     vertical-align: middle;
     width: 300px;
   }
   </style>
   
   <div class="block"><div class="centered">Centered Content</div></div>
   

   ---

   2 commentaires

   La meilleure solution en effet, puisqu'elle n'a pas besoin de connaître la hauteur du contenu et n'utilise pas de CSS de la table de table. Merci d'avoir partagé!

   ---

   Y a-t-il un moyen de faire cela tout en ayant une largeur de pourcentage (qui pourrait être 100%).

   ---

   ---

   2
   votes

   jolie Approche fraîche et moderne (Avec hauteur spécifiée):

   .Absolute-Center {
     margin: auto;
     position: absolute;
     top: 0; left: 0; bottom: 0; right: 0;
   }
   

   ---

   0 commentaires

   ---

   2
   votes

   J'utilise l'affichage: Boîte Propriété:

   #container {
       display: box;
       box-orient: vertical;
       box-pack: center;  
   }
   
   #text {
       vertical-align: middle;
   }
   

   ---

   0 commentaires

   ---

   4
   votes

   Utilisez la propriété TRADUCTE, c'est simple et fonctionne même dans IE:

   img {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }
   

   ---

   0 commentaires

   ---

   1
   votes

   J'utilise Flex pour centrer un élément. Il est efficace de rendre la page plus réactive.

   div {
       display: flex;
       align-items: center;
   }
   

   ---

   0 commentaires

   ---

   Articles qui pourrait vous intéresser :

   Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO

   ---

   Select2 ne s'affiche pas correctement dans le mode bootstrap

   ---

   Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?

   ---

   Comment puis-je définir un format pour les nombres d'entrée dans Blazor

   ---