Comment alignez verticalement 2 tailles de texte?

Je sais que pour aligner le texte verticalement au moyen d'un bloc, vous pouvez définir la ligne de hauteur à la même hauteur du bloc.

Cependant, si j'ai une phrase avec un mot dans le milieu, c'est 2em. Si l'ensemble de la phrase a une line-height le même que le bloc contenant, puis le plus grand texte est aligné verticalement, mais le petit texte sur la même ligne de base que le texte plus grand.

Comment puis-je le régler de sorte que les deux tailles de texte sont alignées verticalement, de sorte que le plus grand texte sera sur une base inférieure à la plus petite de texte?

InformationsquelleAutor JD Isaacks | 2010-10-22
  1. 138

    Essayer vertical-align:middle; inline sur les conteneurs?

    EDIT : ça fonctionne, mais votre texte doit être dans une ligne de conteneurs, comme ceci :

    HTML:

        <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

    • Et j'ai toujours pensé que vertical-align: middle était pour table-cell's seulement!
    • Cela semble échouer si je veux la deuxième travée à droite flotté. Puis ses aligné sur le dessus: jsfiddle Toutes les idées sur la façon de le faire fonctionner avec flotteur?
    • Est-il nécessaire de régler la taille et la hauteur de la ligne des styles de la div parent?
    InformationsquelleAutor MatTheCat
  2. 5

    La fonctionnalité que vous voyez est correct, car la valeur par défaut pour "vertical-align" est la ligne de base. Il semble que vous voulez vertical-align:top. Il y a d'autres options.
    Voir ici à W3Schools.

    Modifier W3Schools n'a pas nettoyé son acte et encore, apparaître, être de mauvaise qualité (au mieux) source de l'information. Je vais maintenant utiliser sitepoint. Faites défiler vers le bas de la sitepoint de page avant d'accéder à leurs sections de référence.

    • Depuis, j'ai appris que W3Schools n'est pas un bon site de référence. Voir w3fools.com pour plus d'info.
    • +1 Ont un upvote pour venir à la conclusion que W3S est un morceau de ferraille.
    InformationsquelleAutor DwB
  3. 4

    les deux à l'ensemble du texte doit avoir la même hauteur de la ligne et le vertical-align ensemble

     span{
     vertical-align: bottom;
     line-height: 50px;
}
    InformationsquelleAutor Matoeil
  4. 1

    Vous techniquement ne pouvez pas, cependant, si vous avez fixé la taille du texte vous pouvez utiliser le positionnement (relatif) pour déplacer le texte plus grand vers le bas et de définir la ligne de hauteur à la plus petite du texte (je suis en supposant ce texte est marqué en tant que tel, de sorte que vous pouvez l'utiliser comme un sélecteur CSS)

    InformationsquelleAutor Alex
  5. 1

    Vous pouvez utiliser le pourcentage des tailles de réappliquer le parent line-height

    CSS:

    .big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

    HTML:

    Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis

    InformationsquelleAutor Creaforge
  6. 0

    Une option est d'utiliser un tableau il y a les différentes tailles de textes sont dans leurs propres cellules et l'utilisation align:middle sur chaque cellule.

    Son pas assez et ne fonctionne pas pour toutes les occasions, mais il est simple et fonctionne avec n'importe quelle taille du texte.

    • Je serais plutôt d'accepter la défaite avant d'utiliser un tableau pour la mise en page de nouveau.
    InformationsquelleAutor David Mårtensson
  7. 0

    Cela fonctionne

    CSS:

    header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

    HTML:

    <header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

    InformationsquelleAutor Ron Royston