Proyek terkini melibatkan produksi berbagai bentuk, terutama kotak centang dan radio. Namun, selama proses pengembangan front-end, ditemukan bahwa satu (beberapa) kotak centang dan teks perintah di belakangnya tidak dapat disejajarkan tanpa pengaturan apa pun, dan terdapat perbedaan besar antara Firefox dan IE. Meskipun vertical-align:middle sudah disetel, namun masih belum sejajar sempurna. Seperti yang ditunjukkan di bawah ini:
Jadi saya memeriksa beberapa situs online dan menemukan bahwa masalah ini umum terjadi, seperti yang ditunjukkan di bawah ini (FF3.5):
Di banyak halaman situs web yang melibatkan formulir, terdapat masalah yaitu elemen formulir dan teks perintah tidak dapat disejajarkan. Jadi saya memutuskan untuk mempelajari masalah ini. Pertama-tama, saya mencari artikel senior Wheatlee " Setiap orang memiliki pendapat berbeda tentang perataan vertikal ". Dalam artikelnya, Wheatlee menyebutkan poin-poin penting berikut tentang pemusatan vertikal:
1. Saat vertical-align:middle digunakan, bagian tengah elemen sejajar dengan bagian tengah elemen di sekitarnya.
2. Yang dimaksud dengan "tengah" di sini adalah: gambar tentu saja tingginya setengah, dan teks harus dipindahkan ke atas 0,5ex berdasarkan garis dasar, yaitu tepat di tengah huruf kecil "x". Namun, banyak browser yang sering mendefinisikan satuan ex sebagai 0,5em, sehingga belum tentu merupakan pusat x (jika Anda tidak memahami istilah seperti baseline, harap baca artikel Wheatlee terlebih dahulu)
Mengikuti ide ini dan membandingkan masalah yang saya temui, hal pertama yang saya pikirkan adalah memverifikasi apakah browser menggunakan aturan yang sama untuk merender "kotak centang" dan gambar (apakah itu memperlakukan kotak centang sebagai gambar persegi). Jadi saya menulis kode berikut:
<gaya>
badan{ukuran font:12px;}
</gaya>
<input style="vertikal-align:middle;" nama="test" type="kotak centang">
<img style="vertikal-align:tengah;" src="testpic.gif" />
teks tes
Testpic.gif pada kode tersebut berupa gambar berwarna hitam dengan ukuran yang sama persis dengan kotak centang. Tampilan pada FF3.5 adalah sebagai berikut:
