Comment aligner le texte verticalement dans les navigateurs

Veuillez noter que j'ai été à travers les liens existants sur ce sujet et aucun ne semble pour l'aider dans mon cas.

Suggèrent tous une façon de comment faire pour déplacer le texte verticalement, de sorte qu'il semble alignée. Le problème dans mon cas, c'est qu'il est déjà aligné en Chrome, donc, lorsque j'essaie d'aligner le texte pour Firefox puis il misaligns le texte dans le navigateur Chrome.

Veuillez ouvrir le lien suivant dans Firefox (v12) et Chrome (v19).

http://jsfiddle.net/UQ4D5/

Vous remarquerez qu'elle est décalée vers le haut dans Firefox, mais est parfaitement aligné dans google Chrome.

De l'expérience, quelques scénarios seront traités différemment par les moteurs de rendu - notamment l'alignement vertical à l'intérieur d'un élément avec un étrange hauteur. Sur l'envers, même les scénarios seront traitées de manière uniforme dans, le navigateur et le 2px déplacement est probablement négligeable

OriginalL'auteur AppleGrew | 2012-05-29

  1. 4

    Deux propriétés dans votre css 

     display: table-cell;
    vertical-align: middle;

    Vérifier à vivre démo http://jsfiddle.net/UQ4D5/5/

    Cela semble bien fonctionner dans FF et Chrome. Pouvez-vous s'il vous plaît confirmer si cela fonctionne dans IE9+?
    oui il travail soit+8.
    si vous cochez la case à toutes les propriétés qui fonctionnent navigateur que d'aller à ce site caniuse.com
    Il semble que FF a rendu bug. Checkout jsfiddle.net/UQ4D5/15. Notez que vous faites un récipient plus petit et la police de caractères plus grande, l'erreur augmente. Donc, je pense qu'il est vain d'essayer de remédier à ce problème.

    OriginalL'auteur Rohit Azad

  2. 1

    Apprendre à utiliser réinitialiser.css ou normaliser.css pour empêcher les petites différences dans le navigateur rendu des modèles.

    Et ensuite utiliser hauteur=hauteur de la ligne astuce:

    div {
    font-size: 100px;
    text-align: center;
    height: 120px;
    line-height: 120px;
    border: 1px solid black;
}

    chrome métriques:

    Comment aligner le texte verticalement dans les navigateurs

    firefox métriques:

    Comment aligner le texte verticalement dans les navigateurs

    Hauteur est la même dans les deux cas.

    Dans mon code, je suis en effet à l'aide de réinitialisation. De toute façon, je fatigué de votre solution dans FF et c'est toujours décalé vers le haut. Démo: jsfiddle.net/UQ4D5/10
    j'ai ajouté des métriques statistiques de ce 2 navigateur et il est identiques les uns aux autres
    Même si vous n'utilisez pas height et line-height la hauteur sera toujours de même. Dans ce cas, il utilise l'enfant (nœud de texte) afin de déterminer sa hauteur. Même lorsque les hauteurs sont les mêmes, la position verticale du texte n'est pas. Je ne suis pas sûr de la façon de mesurer qu'à l'exception de la prise de capture d'écran et à l'aide d'une échelle.

    OriginalL'auteur Vladimir Starkov

  3. 0

    La question est basé sur le Navigateur par défaut des feuilles de style. Je vous recommande d'utiliser un réinitialisation de la feuille de style ou même normaliser.css

    OriginalL'auteur gearsdigital