Bagaimana cara meratakan 2 ukuran teks secara vertikal?

91

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?

JD Isaacks
sumber

Jawaban:

149

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>

MatTheCat
sumber
5
Dan saya selalu berpikir vertical-align: middlehanya untuk table-cellitu!
Robin van Baalen
1
Ini sepertinya gagal jika saya ingin rentang kedua melayang ke kanan. Kemudian disejajarkan di atas: jsfiddle Ada ide bagaimana membuatnya bekerja dengan float?
philk
2
Apakah perlu untuk menyetel gaya tinggi dan tinggi baris dari div induk?
lexeek
6

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.

DwB
sumber
11
Saya telah mengetahui bahwa W3Schools bukanlah situs referensi yang baik. Lihat w3fools.com untuk info lebih lanjut.
DwB
2
+1 Dapatkan suara positif untuk sampai pada kesimpulan bahwa W3S adalah bagian dari sampah.
aefxx
4

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

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

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)

Alex
sumber
1

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 

Creaforge
sumber
1

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

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.

David Mårtensson
sumber
9
Saya lebih suka menerima kekalahan sebelum menggunakan tabel untuk tata letak lagi.
JD Isaacks
0

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>

Ronnie Royston
sumber