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

91

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?

— JD Isaacks
źródło

149

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>

Rozwiń fragment

— MatTheCat
źródło

5

I zawsze myślałem, że vertical-align: middleto table-celltylko dla!

— Robin van Baalen

1

Wydaje się, że to się nie udaje, jeśli chcę, aby druga rozpiętość była poprawnie ustawiona. Następnie jest wyrównany na górze: jsfiddle Jakieś pomysły, jak sprawić, by działał z float?

— philk

2

Czy konieczne jest ustawienie stylów wysokości i wysokości linii macierzystego elementu DIV?

— lexeek

6

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.

— DwB
źródło

11

Od tego czasu dowiedziałem się, że W3Schools nie jest dobrą stroną referencyjną. Więcej informacji można znaleźć w witrynie w3fools.com .

— DwB

2

+1 Głos za przyjęciem wniosku, że W3S to śmieć.

— aefxx,

4

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

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

— Matoeil
źródło

1

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)

— Alex
źródło

1

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

Rozwiń fragment

— Creaforge
źródło

1

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

— Tomas Macek
źródło

0

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.

— David Mårtensson
źródło

9

Wolałbym zaakceptować porażkę przed ponownym użyciem stołu do układu.

— JD Isaacks

0

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>

Rozwiń fragment

— Ronnie Royston
źródło