web-dev-qa-db-fra.com

Comment aligner verticalement 2 tailles de texte différentes?

Je sais que pour aligner verticalement le texte au milieu d'un bloc, vous définissez la hauteur de ligne sur la même hauteur que le bloc.

Cependant, si j’ai une phrase avec un mot au milieu, c’est 2em. Si la phrase entière a une hauteur de ligne identique à celle du bloc qui le contient, le texte le plus grand est aligné verticalement, mais le texte le plus petit figure sur la même ligne de base que le texte le plus grand.

Comment puis-je le définir pour que les deux tailles de texte soient alignées verticalement, de sorte que le texte le plus grand se trouve sur une ligne de base inférieure au texte plus petit?

csstextvertical-alignmentbaseline
73
JD Isaacks

Essayez vertical-align:middle; sur les conteneurs en ligne?

EDIT: cela fonctionne mais tout votre texte doit être dans un conteneur en ligne, comme ceci:

    <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>

130
MatTheCat

La fonctionnalité que vous voyez est correcte car la valeur par défaut de "vertical-align" est baseline. Il semble que vous souhaitiez vertical-align:top. Il y a d'autres options. Voir ici à W3Schools .

Edit W3Schools n’a pas clarifié son comportement et semble toujours être une source d'informations de mauvaise qualité (au mieux). J'utilise maintenant sitepoint . Faites défiler vers le bas de la page d'accueil de sitepoint pour accéder à leurs sections de référence.

5
DwB

les deux jeux de texte doivent avoir la même hauteur de ligne fixe et le jeu d'alignement vertical

 span{
     vertical-align: bottom;
     line-height: 50px;
}
3
Matoeil

Techniquement, vous ne pouvez pas, cependant, si vous avez des tailles de texte fixes, vous pouvez utiliser le positionnement (relatif) pour déplacer le texte le plus grand vers le bas et définir la hauteur de ligne sur le texte le plus petit (je présume que ce texte plus grand est marqué comme tel afin que vous puissiez utiliser cela comme un sélecteur CSS)

1
Alex

Vous pouvez utiliser des tailles en pourcentage pour réappliquer le line-height du parent.

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}
Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis
1
Creaforge

Manière simple - utilisez flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>
0
Tomas Macek

Une option consiste à utiliser un tableau dans lequel les textes de tailles différentes se trouvent dans leurs propres cellules et utilisent aligner: au centre de chaque cellule.

Ce n'est pas joli et ne fonctionne pas pour toutes les occasions, mais c'est simple et fonctionne avec n'importe quelle taille de texte.

0
David Mårtensson

Cela marche

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;
}
<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

0
Ron Royston