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：里面跨度

回答

相关问题