2 farklı boyuttaki metni dikey olarak nasıl hizalarsınız?

Metni bir bloğun ortasına dikey olarak hizalamayı biliyorum, satır yüksekliğini bloğun aynı yüksekliğine ayarlarsınız.

Bununla birlikte, ortasında bir kelime olan bir cümle varsa 2em. Tüm cümlenin satır yüksekliği içeren blokla aynı ise, daha büyük metin dikey olarak hizalanır, ancak daha küçük metin büyük metinle aynı taban çizgisindedir.

Her iki metin boyutu da dikey olarak hizalanacak, böylece daha büyük metin, küçük metinden daha düşük bir taban çizgisinde olacak şekilde nasıl ayarlayabilirim?

vertical-align:middle;Satır içi kapsayıcıları denemek ister misiniz?

DÜZENLEME: işe yarıyor ancak metninizin tamamı aşağıdaki gibi bir satır içi kapsayıcıda olmalıdır:

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

Gördüğünüz işlevsellik doğrudur çünkü "dikey hizalama" için varsayılan değer taban çizgisidir. Görünüşe göre istiyorsun vertical-align:top. Başka seçenekler de var. W3Schools'ta buraya bakın .

Edit W3Schools eylemlerini temizlemedi ve hala kalitesiz (en iyi ihtimalle) bir bilgi kaynağı gibi görünüyor. Şimdi site noktası kullanıyorum . Referans bölümlerine erişmek için site noktası ön sayfasının altına kaydırın.

iki metin kümesi aynı sabit satır yüksekliğine ve dikey hizalama kümesine sahip olmalıdır

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

Teknik olarak yapamazsınız, ancak sabit metin boyutlarınız varsa, daha büyük metni aşağı taşımak ve satır yüksekliğini daha küçük metne ayarlamak için konumlandırmayı (göreceli) kullanabilirsiniz (bu daha büyük metnin bu şekilde işaretlendiğini varsayıyorum. böylece bunu bir CSS seçici olarak kullanabilirsiniz)

Yüzde boyutlarını üst öğenin 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 

Kolay yol - esnek kullanın:

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

Bir seçenek, farklı boyuttaki metinlerin kendi hücrelerinde bulunduğu bir tablo kullanmak ve her hücrede align: middle özelliğini kullanmaktır.

Güzel değil ve her durumda işe yaramıyor, ancak basit ve her metin boyutunda çalışıyor.

Bu çalışıyor

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>