為什麼vertical-align: middle但是， vertical-align: top 不起作用？ <em>確實</em>有效。</p> <p><br />></p>
vertical-align: middle
vertical-align: top
span{ 垂直對齊：居中； }</pre> ; <img src="https://via.placeholder.com/30" alt="小img" /> 不起作用。 </div></pre> <p><br />></p> 2 0 0 P粉360266095 全部回覆(2) 我來回復 關閉 P粉1460805562023-08-28 11:32:18 2樓 以下是一些垂直對齊的簡單技巧： 單行垂直對齊：中間 這個很簡單：將文字元素的行高設定為等於容器的行高 <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 ## <div style="display:table;width:30px;height:60px;"> <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div> 如果必須支援舊版的 IE 為了使其全面正常運作，您必須對 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%); 點贊 +0 新增回覆 关闭回复 P粉360266095 回覆 P粉8912379122023-08-28 09:35:31 1樓 實際上，在這種情況下，它非常簡單：對影像套用垂直對齊。由於所有內容都在一行中，因此您實際上要對齊的是圖像，而不是文字。 <!-- 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> 點贊 +0 新增回覆 关闭回复 P粉360266095 回覆
; <img src="https://via.placeholder.com/30" alt="小img" /> 不起作用。 </div></pre> <p><br />></p> 2 0 0 P粉360266095 全部回覆(2) 我來回復 關閉 P粉1460805562023-08-28 11:32:18 2樓 以下是一些垂直對齊的簡單技巧： 單行垂直對齊：中間 這個很簡單：將文字元素的行高設定為等於容器的行高 <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 ## <div style="display:table;width:30px;height:60px;"> <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div> 如果必須支援舊版的 IE 為了使其全面正常運作，您必須對 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%); 點贊 +0 新增回覆 关闭回复 P粉360266095 回覆 P粉8912379122023-08-28 09:35:31 1樓 實際上，在這種情況下，它非常簡單：對影像套用垂直對齊。由於所有內容都在一行中，因此您實際上要對齊的是圖像，而不是文字。 <!-- 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> 點贊 +0 新增回覆 关闭回复 P粉360266095 回覆
以下是一些垂直對齊的簡單技巧：
這個很簡單：將文字元素的行高設定為等於容器的行高
<div> <img style="width:30px; height:30px;"> <span style="line-height:30px;">Doesn't work.</span> </div>
<div style="position:relative;width:30px;height:60px;"> <div style="position:absolute;bottom:0">This is positioned on the bottom</div> </div>
## <div style="display:table;width:30px;height:60px;"> <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div> 如果必須支援舊版的 IE 為了使其全面正常運作，您必須對 CSS 進行一些修改。幸運的是，有一個 IE 錯誤對我們有利。在容器上設定
## <div style="display:table;width:30px;height:60px;"> <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div>
<div style="display:table;width:30px;height:60px;"> <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div>
，可以得到相同的結果。我們可以使用 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
<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>
此解決方案需要比其他解決方案稍微更現代的瀏覽器，因為它使用
position: relative; top: 50%; transform: translateY(-50%);
實際上，在這種情況下，它非常簡單：對影像套用垂直對齊。由於所有內容都在一行中，因此您實際上要對齊的是圖像，而不是文字。
<!-- 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>
以下是一些垂直對齊的簡單技巧：
單行垂直對齊：中間
這個很簡單：將文字元素的行高設定為等於容器的行高
多行vertical-align:bottom
#相對於其容器絕對定位內部 div
多行vertical-align:middle
top:50%##如果必須支援舊版的 IE 為了使其全面正常運作，您必須對 CSS 進行一些修改。幸運的是，有一個 IE 錯誤對我們有利。在容器上設定，在內部 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>此解決方案需要比其他解決方案稍微更現代的瀏覽器，因為它使用
transform:translateY### 屬性。 （###http://caniuse.com/#feat=transforms2d###）### ###將以下 3 行 CSS 套用到元素將使其在其父元素中垂直居中，無論父元素的高度為何：###實際上，在這種情況下，它非常簡單：對影像套用垂直對齊。由於所有內容都在一行中，因此您實際上要對齊的是圖像，而不是文字。