CSS：裏面跨度

這裏我的問題的一個小的演示文本垂直對齊圖像...CSS：裏面跨度

<html> 
 

 
<body> 
 
    <span style="border: 1px solid black; background-color: #CCCCFF"> My text 
 
     <img style="width: 1em; height: 1em; vertical-align: middle;" 
 
     src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> My text </span> 
 
</body> 
 

 
</html>

正如你可以看到我已經風格的圖像vertical-align: middle但仍然圖像在底部錯位。

如何讓它在頂部和底部邊界之間居中？

編輯：下面是這個問題的一個很好的破敗：

http://phrogz.net/css/vertical-align/

來源

2015-11-07 Rop

我如何得到它的頂部和底部邊框的中間位置？

您可以嘗試使用CSS flexbox。

檢查下面的例子：

span { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    padding: 5px; 
 
} 
 
img { 
 
    width: 20px; 
 
    margin: 0 5px; 
 
}

<span style="border: 1px solid black; background-color: #CCCCFF"> 
 
    My text 
 
    <img src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> 
 
    My text 
 
</span>

來源

2015-11-07 12:09:32 Romulo

謝謝！最後，這在我看來是修復代碼的最簡單，最普通的方法。雖然不需要指定span.padding和img.margin，但默認值對我來說工作正常。 – Rop

在本JS Fiddle，我給的1.3em包裝span高度值，把它的顯示屏inline-block，這樣的高度值將生效，然後爲圖像輸入margin-top:0.1em

<span style="display:inline-block;height:1.3em; border: 1px solid black; background-color: #CCCCFF"> My text 
 
    <img style="width: 1em; height: 1em; margin-top:.1em;" 
 
    src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> My text </span>

請注意，您既可以在父span和img高度設置爲1em，但保留display:inline-block;，thusthe img將適合跨度witouth利潤率裏面。

來源

2015-11-07 11:50:47

你可以試試這個：

span 
{ 
    display:inline-block;height:1.2em; 
}

DEMO HERE

來源

2015-11-07 11:52:25

試試這個

<html><body> 
    <span style="border: 1px solid black; background-color: #CCCCFF"> My text 
    <img style="width: 1em; height: 1em; vertical-align: top; margin-top:1px" 
    src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> My text </span> 
</body></html>`enter code here`

來源

2015-11-07 11:57:46 keshavkhatri

請將解釋添加到您的答案。 – Alex

給padding-bottom你的形象

<img style="padding-bottom:2px; width: 1em; height: 1em; vertical-align: middle;" src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png">

來源

2015-11-07 12:37:10 WisdmLabs

使用vertical-align: middle調整與文本高度的形象，你可以看到在我的屏幕轉儲，圖像恰好在文本的頂部/底部（我加了2 gre en行來形象化）。

文字和上邊框之間的「空」的空間，是一個特定的字體（這是針對不同的字體不同）如何安排其內部高度內的字符。

現在，由於某種原因，如果你想「打破」這個並調整例如字體內部高度的圖像（如在你的問題中，在頂部/底部邊界之間），你需要添加「邊距「某處。

要讓文本流盡可能正常，你可以：

幾個像素保證金/填充添加到圖像元素
增加像素的一些額外的線條與圖像完全透光性好，

注意：根據您需要的完美程度，您需要計算您使用的字體的「邊距」（它可能會/可能會不同），字體大小，並且您還可能需要檢查在不同的操作系統上也是如此。

「強制文本/圖片」到中心，你可以：

使用display: table
使用display: flex（在IE8/9工作）

（不要在IE8/9工作）

下面是使用「填充」和display: table樣品：

/* padding */ 
 
span img { 
 
    padding-bottom: 3px; 
 
    width: 20px; 
 
    vertical-align: middle; 
 
} 
 

 
/* display table */ 
 
div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 5px; 
 
} 
 
div span { 
 
    vertical-align: middle; 
 
} 
 
div img { 
 
    width: 20px; 
 
    vertical-align: middle; 
 
}

<span style="padding: 5px;border: 1px solid black; background-color: #CCCCFF"> This one 
 
      <img 
 
      src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> use padding </span> 
 

 
<br /><br /> 
 

 
<div style="border: 1px solid black; background-color: #CCCCFF"> 
 
    <span>This one</span> 
 
    <img src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> 
 
    <span>use display: table</span> 
 
</div>

來源

2015-11-07 14:40:38 LGSon

感謝您的解釋。 ---但是，我發現奇怪/不一致的是，垂直對齊：頂部和垂直對齊：底部，兩者似乎與預期的跨度邊界對齊，而垂直對齊：中間，實際上使圖像一個像素LOWER比垂直對齊：底部---我想有一些委員會在某個地方真的很難琢磨多年，最終得到這樣的規範:) – Rop

在這裏找到了一個很好的概要：http://phrogz.net/css/vertical-align/ – Rop

@Rop Yepp，發現還用「不支持flex的瀏覽器」示例更新了我的答案。 – LGSon

CSS：裏面跨度

回答

相關問題