Bagaimana untuk menjajarkan teks secara menegak dengan imej?

Question

为什么 menjajarkan: tengah 不起作用？然而， menjajarkan: atas 确实有效。

span{
  vertical-align: tengah;
}

<div>
  <img src="https://via.placeholder.com/30" alt="img kecil" />
  <span>Tidak berfungsi.</span>
</div>

Answer 1

Berikut adalah beberapa teknik mudah untuk penjajaran menegak:

Penjajaran menegak baris tunggal: tengah

Yang ini mudah: tetapkan ketinggian baris elemen teks sama dengan ketinggian baris bekas

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Jalur menegak berbilang baris: bawah

Letakkan div dalam secara mutlak berbanding bekasnya

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Jalur menegak berbilang baris:tengah

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Jika anda mesti menyokong versi lama IE

Untuk membolehkan ini berfungsi sepenuhnya, anda perlu membuat beberapa perubahan pada CSS. Nasib baik, terdapat pepijat IE yang memihak kepada kami. Tetapan top:50% ，在内部 div 上设置 top:-50% pada bekas memberikan hasil yang sama. Kami boleh menggabungkan kedua-duanya menggunakan ciri lain yang IE tidak menyokong: pemilih CSS lanjutan.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Ketinggian bekas boleh ubah jajar menegak:tengah

Penyelesaian ini memerlukan penyemak imbas yang lebih moden sedikit daripada penyelesaian lain kerana ia menggunakan atribut transform:translateY. (http://caniuse.com/#feat=transforms2d)

Menggunakan 3 baris CSS berikut pada elemen akan memusatkannya secara menegak dalam elemen induknya, tanpa mengira ketinggian elemen induk:

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

Sebenarnya, dalam kes ini, ia sangat mudah: gunakan penjajaran menegak pada imej. Memandangkan semuanya berada pada satu baris, anda sebenarnya menjajarkan imej, bukan teks.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>