Wie kann ich 2 verschiedene Textgrößen vertikal ausrichten?

Ich weiß, um Text vertikal an der Mitte eines Blocks auszurichten, setzen Sie die Zeilenhöhe auf die gleiche Höhe des Blocks.

Wenn ich jedoch einen Satz mit einem Wort in der Mitte habe, ist das so 2em. Wenn der gesamte Satz eine Zeilenhöhe hat, die der des enthaltenden Blocks entspricht, wird der größere Text vertikal ausgerichtet, der kleinere Text befindet sich jedoch auf derselben Grundlinie wie der größere Text.

Wie kann ich festlegen, dass beide Textgrößen vertikal ausgerichtet sind, sodass der größere Text auf einer Grundlinie liegt, die niedriger als der kleinere Text ist?

Versuchen Sie vertical-align:middle;auf Inline - Container?

BEARBEITEN: Es funktioniert, aber Ihr gesamter Text muss sich wie folgt in einem Inline-Container befinden:

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

Die angezeigte Funktionalität ist korrekt, da die Standardeinstellung für "Vertikalausrichtung" die Grundlinie ist. Es scheint, dass Sie wollen vertical-align:top. Es gibt andere Möglichkeiten. Siehe hier bei W3Schools .

Bearbeiten W3Schools hat ihre Handlung nicht aufgeräumt und scheint immer noch eine schlechte (bestenfalls) Informationsquelle zu sein. Ich benutze jetzt Sitepoint . Scrollen Sie zum Ende der Sitepoint-Startseite, um auf deren Referenzabschnitte zuzugreifen.

Die beiden Textsätze müssen dieselbe feste Zeilenhöhe und dieselbe vertikale Ausrichtung haben

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

Sie können dies jedoch technisch nicht tun, wenn Sie feste Textgrößen haben. Sie können die Positionierung (relativ) verwenden, um den größeren Text nach unten zu verschieben und die Zeilenhöhe auf den kleineren Text einzustellen (ich gehe davon aus, dass dieser größere Text als solcher markiert ist Sie können dies also als CSS-Auswahl verwenden.

Sie können Prozentgrößen verwenden, um die übergeordneten Größen erneut anzuwenden 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 

Eine Option besteht darin, eine Tabelle zu verwenden, in der sich die unterschiedlich großen Texte in ihren eigenen Zellen befinden, und Align: Middle für jede Zelle zu verwenden.

Es ist nicht schön und funktioniert nicht für alle Gelegenheiten, aber es ist einfach und funktioniert mit jeder Textgröße.

Das funktioniert

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>

Einfacher Weg - Flex verwenden:

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