Bagaimana cara meratakan 2 ukuran teks secara vertikal?

Saya tahu untuk meratakan teks secara vertikal ke tengah blok, Anda mengatur tinggi baris ke ketinggian yang sama dari blok.

Namun, jika saya memiliki kalimat dengan kata di tengah, itu saja 2em. Jika seluruh kalimat memiliki tinggi baris yang sama dengan blok penampungnya, maka teks yang lebih besar diratakan secara vertikal tetapi teks yang lebih kecil berada pada garis dasar yang sama dengan teks yang lebih besar.

Bagaimana saya bisa mengaturnya sehingga kedua ukuran teks disejajarkan secara vertikal, sehingga teks yang lebih besar akan berada pada garis dasar yang lebih rendah dari teks yang lebih kecil?

Coba vertical-align:middle;wadah inline?

EDIT: berfungsi tetapi semua teks Anda harus berada dalam wadah inline, seperti ini:

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

Fungsi yang Anda lihat sudah benar karena default untuk "perataan vertikal" adalah dasar. Tampaknya Anda menginginkan vertical-align:top. Ada pilihan lain. Lihat di sini di W3Schools .

Sunting W3Schools belum membersihkan tindakan mereka dan masih tampak sebagai sumber informasi yang buruk (paling banter). Saya sekarang menggunakan sitepoint . Gulir ke bawah halaman depan sitepoint untuk mengakses bagian referensinya.

dua kumpulan teks harus memiliki tinggi garis tetap dan kumpulan perataan vertikal yang sama

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

Anda secara teknis tidak bisa, namun, jika Anda memiliki ukuran teks tetap, Anda dapat menggunakan pemosisian (relatif) untuk memindahkan teks yang lebih besar ke bawah dan mengatur tinggi baris ke teks yang lebih kecil (saya menganggap teks yang lebih besar ini ditandai seperti itu. sehingga Anda dapat menggunakannya sebagai pemilih CSS)

Anda dapat menggunakan ukuran persentase untuk menerapkan kembali ukuran induknya 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 

Cara mudah - gunakan flex:

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

Pilihannya adalah dengan menggunakan tabel di sana teks dengan ukuran berbeda berada di selnya sendiri dan menggunakan align: middle pada setiap sel.

Ini tidak cantik dan tidak berfungsi untuk semua kesempatan, tetapi sederhana dan berfungsi dengan ukuran teks apa pun.

Ini bekerja

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>