Alignement vertical du glyphicon dans le bootstrap 3

Navigateur Bug Explication

Selon MDN sur :

Pour position relative des éléments (ceux avec position: relative), il spécifie la quantité de l'élément est déplacé au-dessous de sa position normale.

Note: Pourcentage est appliqué comme un pourcentage de la hauteur de l'élément du bloc contenant

Selon W3 sur :

Pour positionnée relativement boîtes, le décalage de l'est à l'égard du haut des bords de la boîte elle-même (c'est à dire, la boîte est donnée à une position dans le flux normal, puis de décalage à partir de cette position, en fonction de ces propriétés).
Note: les Pourcentages se réfèrent à la hauteur du bloc contenant

Voici ma conjecture:

Je pense que ce qui se passe est que lorsque le navigateur est d'abord rendu l'arborescence visuelleet voit top:50%;il ressemble à la mère de définir la hauteur. Depuis pas de hauteur a été spécifiquement mis en œuvre, et il n'a pas chargé de tout enfant de contenu, la hauteur de cette div (et tous les divs) effectivement commence à zéro jusqu'à indication contraire. Puis, il pousse le glyphe de 50% de zéro.

Lorsque vous mettez de la propriété plus tard, le navigateur a déjà rendu de tout, de sorte que le calcul de la hauteur du conteneur parent est fourni par la hauteur de ses enfants.

Minime, Complètes et Vérifiables Exemple

Note: Ce n'est pas vraiment rien avoir à faire avec Bootstrap ou Glyphicons. Afin d'éviter une dépendance sur bootstrap, nous allons ajouter top: 1px qui aurait été appliquée par le .glyphicon classe. Même si il est écrasé par 50%il joue encore un rôle important.

Voici un ensemble simple de l'enfant et le parent des éléments:

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

Afin de simuler le basculement de la propriété à un plus reproductibles de la mode, on peut juste attendre deux secondes, puis appliquer un style en javascript comme ceci:

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

Exemple 1 (jsFiddle)

Comme un point de départ, nous allons recréer 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 va redessiner l'écran et déplacez l'élément de retour vers le haut.

Exemple 2 (jsFiddle)

Si vous ajoutez top: 50% de l'élément enfant, rien ne se passera quand le javascript ajoute la propriété car il n'y a pas de quoi les remplacer.

Exemple 3 (jsFiddle)

Si vous ajoutez top: 49% à l'enfant de l'élément, puis les DOM n'ont quelque chose à mettre à jour, de sorte que nous allons obtenir la bizarre glitch nouveau.

Exemple 4 (jsFiddle)

Si vous ajoutez height: 50px; pour le contenant plutôt que de l'enfant, puis l' top propriété a quelque chose à position contre le droit de l'aller et vous n'avez pas besoin d'activer et désactiver le JavaScript.

---

Comment Alignez Verticalement

Si vous voulais juste savoir comment la verticale du centre de quelque chose de manière cohérente, alors vous pouvez effectuer les opérations suivantes:

Le truc à la verticale de centrage du texte est de définir la line-height égale à la hauteur du conteneur. Si une ligne de 100 pixels, et la ligne de texte en ligne prend jusqu'à 10, les navigateurs vont essayer de centrer le texte dans les 90 pixels, avec le 45 sur le haut et le bas.

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

Solution dans jsFiddle

Avez-vous essayé ? :

<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>