wake-up-neo.net

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

Ich weiß, um Text vertikal in 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 2em. Wenn der gesamte Satz dieselbe Zeilenhöhe hat wie der umgebende Block, wird der größere Text vertikal ausgerichtet, der kleinere Text befindet sich jedoch auf derselben Grundlinie wie der größere Text.

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

csstextvertical-alignmentbaseline
73
JD Isaacks

vertical-align:middle; für Inline-Container verwenden?

BEARBEITEN: es funktioniert, aber der gesamte Text muss sich in einem Inline-Container befinden, wie folgt:

    <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

Die Funktionalität, die Sie sehen, ist korrekt, da die Grundeinstellung für "vertikales Ausrichten" standardmäßig ist. Es scheint, dass Sie vertical-align:top wollen. Es gibt andere Möglichkeiten. Siehe hier unter W3Schools .

Edit W3Schools hat ihre Aktion nicht bereinigt und scheint dennoch (im besten Fall) eine bescheidene Informationsquelle zu sein. Ich benutze jetzt sitepoint . Scrollen Sie zum Ende der Sitepoint-Startseite, um auf deren Referenzabschnitte zuzugreifen.

5
DwB

die beiden Textsätze müssen dieselbe feste Zeilenhöhe und den vertikalen Ausrichtungssatz haben

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

Technisch gesehen ist das nicht möglich. Wenn Sie feste Textgrößen haben, können Sie den relativen Text mit der Position (relativ) nach unten verschieben und die Zeilenhöhe auf den kleineren Text einstellen (ich nehme an, dieser größere Text wird als solcher markiert so können Sie das als CSS-Selektor verwenden)

1
Alex

Sie können Prozentgrößen verwenden, um den line-height des übergeordneten Elements erneut anzuwenden.

.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

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

Eine Option besteht darin, eine Tabelle dort zu verwenden, wo sich die unterschiedlich großen Texte in ihren eigenen Zellen befinden und in jeder Zelle die Option align: middle verwenden.

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

0
David Mårtensson

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>

0
Ron Royston