如何將文字與圖像垂直對齊？

Question

為什麼vertical-align: middle但是， vertical-align: top 不起作用？ <em>確實</em>有效。</p> <p><br />></p>

span{
  垂直對齊：居中；
}</pre>
;
  <img src="https://via.placeholder.com/30" alt="小img" />
  不起作用。
</div></pre>
<p><br />></p>
P粉360266095512 天前520 

Answer 1

以下是一些垂直對齊的簡單技巧：

單行垂直對齊：中間

這個很簡單：將文字元素的行高設定為等於容器的行高

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

多行vertical-align:bottom

#

相對於其容器絕對定位內部 div

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

多行vertical-align:middle<= 7

##

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

如果必須支援舊版的 IE <= 7 為了使其全面正常運作，您必須對 CSS 進行一些修改。幸運的是，有一個 IE 錯誤對我們有利。在容器上設定

top:50%

，在內部 div 上設定

top:-50%

，可以得到相同的結果。我們可以使用 IE 不支援的另一個功能將兩者結合起來：高級 CSS 選擇器。

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

可變容器高度vertical-align:middle

此解決方案需要比其他解決方案稍微更現代的瀏覽器，因為它使用

transform:translateY### 屬性。 （###http://caniuse.com/#feat=transforms2d###）### ###將以下 3 行 CSS 套用到元素將使其在其父元素中垂直居中，無論父元素的高度為何：###

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

Answer 2

實際上，在這種情況下，它非常簡單：對影像套用垂直對齊。由於所有內容都在一行中，因此您實際上要對齊的是圖像，而不是文字。

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