web-dev-qa-db-fra.com

Glyphicon d'alignement vertical dans bootstrap 3

J'ai un glyphicon en tant que tel:

<div class="col-xs-4 col-sm-2">
    <span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>

.glyphicon-large {
    min-height: 260px;
    font-size: 35px;
    width: 1em;
    display: block;
    top: 50%;
    margin: -0.5em auto 0px;
}

Le glyphicon ne s'alignera pas au centre, verticalement. Lorsque j'ouvre Firefox, j'inspecte l'élément et je désactive/active le top 50% règle, ça marche soudainement. Comment venir?

csstwitter-bootstraptwitter-bootstrap-3glyphicons
11
matthijs

Explication des bogues du navigateur

Selon MDN sur top :

Pour éléments relativement positionnés (ceux avec position: relative), il spécifie la quantité de déplacement de l'élément en dessous de sa position normale.
Remarque : le pourcentage est appliqué en pourcentage de la hauteur du bloc contenant l'élément

Selon W3 sur top :

Pour les boîtes relativement positionnées, le décalage est par rapport aux bords supérieurs de la boîte elle-même (c.-à-d., La boîte reçoit une position dans le flux normal, puis est décalée de cette position en fonction de ces propriétés ). Remarque : les pourcentages se réfèrent à la hauteur du bloc conteneur

Voici ma supposition:

Je pense que ce qui se passe, c'est que lorsque le le navigateur rend d'abord l'arbre visuel , et voit top:50%;, il regarde le parent pour définir la hauteur. Puisqu'aucune hauteur n'a été spécifiquement appliquée et qu'elle n'a chargé aucun contenu enfant, la hauteur de cette div (et de toutes les divs) est effectivement commence à zéro jusqu'à indication contraire. Il abaisse ensuite le glyphe de 50% de zéro.

Lorsque vous basculez la propriété plus tard, le navigateur a déjà rendu tout, donc la hauteur calculée du conteneur parent est fournie par la hauteur de ses enfants.

Exemple minimal, complet et vérifiable

Remarque : Cela n'a vraiment rien à voir avec Bootstrap ou Glyphicons. Afin d'éviter une dépendance à bootstrap, nous ajouterons top: 1px qui aurait été appliqué par le .glyphicon classe. Même s'il est écrasé par 50%, il joue toujours un rôle important.

Voici un simple ensemble d'éléments parent/enfant:

<div id="container">
    <div id="child">Child</div>
</div>

Afin de simuler le basculement de la propriété d'une manière plus répétable, nous pouvons simplement attendre deux secondes, puis appliquer un style en javascript comme celui-ci:

window.setTimeout(function() {
    document.getElementById("child").style.top = '50%';
},2000);

Exemple 1 ( jsFiddle )

Comme point de départ, recréons votre problème.

#container {
    position: relative;

    /* For Visual Effects */
    border: 1px solid grey;
}
#child {
    position: relative;
    height: 50px;
    top: 1px;

    /* For Visual Effects */
    border: 1px solid orange;
    width: 50px;
    margin: 0px auto;

}

Notez que dès que vous redimensionnez la fenêtre, le navigateur repeint l'écran et remet l'élément en haut.

example1 screen

Exemple 2 ( jsFiddle )

Si vous ajoutez top: 50% à l'élément enfant, rien ne se passera lorsque le javascript ajoute la propriété car il n'aura rien à écraser.

Exemple 3 ( jsFiddle )

Si vous ajoutez top: 49% à l'élément enfant, alors le DOM a quelque chose à mettre à jour, nous obtiendrons à nouveau le problème étrange.

Exemple 4 ( jsFiddle )

Si vous ajoutez height: 50px; au conteneur au lieu de l'enfant, puis la propriété top a quelque chose à positionner dès le départ et vous n'avez pas besoin d'utiliser la bascule en JavaScript.

Comment aligner verticalement

Si vous souhaitez simplement savoir comment centrer verticalement quelque chose de manière cohérente, vous pouvez effectuer les opérations suivantes:

L'astuce pour centrer verticalement du texte consiste à définir line-height égal à la hauteur du conteneur. Si une ligne occupe 100 pixels et que la ligne de texte en ligne en prend 10, les navigateurs essaieront de centrer le texte sur les 90 pixels restants, avec 45 en haut et en bas.

.glyphicon-large {
    min-height:  260px;
    line-height: 260px;
}

Solution dans jsFiddle

41
KyleMit

J'ai essayé de centrer une icône de glyphe qui était à l'intérieur d'une balise H1, cela prenait un certain temps - j'ai donc découvert que vous pouvez réellement changer la taille et la couleur de la police à l'intérieur de la balise SPAN contenant le glyphe.

Donc:

<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span>&nbsp;Mes Messages</h1>

en fait travaillé pour moi.

1
Rowan