Jak wyrównać w pionie 2 różne rozmiary tekstu?

Wiem, że aby wyrównać tekst w pionie do środka bloku, ustawiasz wysokość linii na tę samą wysokość bloku.

To znaczy, jeśli mam zdanie ze słowem pośrodku 2em. Jeśli całe zdanie ma taką samą wysokość wiersza jak zawierający blok, wówczas większy tekst jest wyrównany w pionie, ale mniejszy tekst znajduje się na tej samej linii bazowej co większy tekst.

Jak ustawić, aby oba rozmiary tekstu były wyrównane w pionie, tak aby większy tekst znajdował się na linii bazowej niżej niż mniejszy tekst?

Chcesz wypróbować vertical-align:middle;kontenery inline?

EDYCJA: działa, ale cały tekst musi znajdować się w kontenerze wbudowanym, na przykład:

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

Funkcja, którą widzisz, jest poprawna, ponieważ domyślnym ustawieniem „wyrównanie w pionie” jest linia bazowa. Wygląda na to, że chcesz vertical-align:top. Istnieją inne opcje. Zobacz tutaj w W3Schools .

Edytuj W3Schools nie uporządkowało swoich działań i nadal wydaje się być tandetnym (w najlepszym przypadku) źródłem informacji. Teraz używam sitepoint . Przewiń w dół strony głównej punktu witryny, aby uzyskać dostęp do odpowiednich sekcji.

oba zestawy tekstu muszą mieć tę samą stałą wysokość wiersza i zestaw wyrównania w pionie

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

Z technicznego punktu widzenia nie możesz jednak, jeśli masz stałe rozmiary tekstu, możesz użyć pozycjonowania (względnego), aby przesunąć większy tekst w dół i ustawić wysokość wiersza na mniejszy tekst (przypuszczam, że ten większy tekst jest oznaczony jako taki więc możesz użyć tego jako selektora CSS)

Możesz użyć rozmiarów procentowych, aby ponownie zastosować rozmiar rodzica line-height

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

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

Łatwy sposób - użyj flexu:

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

Opcją jest użycie tabeli, w której teksty o różnych rozmiarach znajdują się we własnych komórkach i użycie align: middle w każdej komórce.

Nie jest ładny i nie działa na wszystkie okazje, ale jest prosty i działa z dowolnym rozmiarem tekstu.

To działa

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>