2015-11-07 77 views
0

這裏我的問題的一個小的演示文本垂直對齊圖像...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/

回答

3

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

您可以嘗試使用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>

+0

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

0

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

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

0

你可以試試這個:

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

DEMO HERE

0

試試這個

<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` 
+0

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

0

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

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

enter image description here

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

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

要讓文本流盡可能正常,你可以:

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

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

「強制文本/圖片」 到中心,你可以:

  • 使用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>

+0

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

+0

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

+0

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