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

90

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?

JD Isaacks
quelle

Antworten:

147

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>

MatTheCat
quelle
5
Und ich dachte immer , vertical-align: middlewar für table-cell‚nur s!
Robin van Baalen
1
Dies scheint zu scheitern, wenn ich möchte, dass die zweite Spanne richtig schwebt. Dann ist es oben ausgerichtet: jsfiddle Irgendwelche Ideen, wie es mit float funktioniert?
Philk
2
Ist es notwendig, Höhen- und Zeilenhöhenstile des übergeordneten Div festzulegen?
Lexeek
6

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.

DwB
quelle
11
Ich habe seitdem erfahren, dass W3Schools keine gute Referenzseite ist. Weitere Informationen finden Sie unter w3fools.com .
DwB
2
+1 Stimmen Sie zu, wenn Sie zu dem Schluss kommen, dass W3S ein Stück Müll ist.
Aefxx
4

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

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

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.

Alex
quelle
1

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 

Creaforge
quelle
0

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.

David Mårtensson
quelle
9
Ich würde lieber eine Niederlage akzeptieren, bevor ich wieder eine Tabelle für das Layout verwende.
JD Isaacks
0

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>

Ronnie Royston
quelle
0

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>
Tomas Macek
quelle