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
但仍然图像在底部错位。
如何让它在顶部和底部边界之间居中?
编辑:下面是这个问题的一个很好的破败:
我如何得到它的顶部和底部边框的中间位置?
您可以尝试使用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>
在本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利润率里面。
试试这个
<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`
请将解释添加到您的答案。 – 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">
使用vertical-align: middle
调整与文本高度的形象,你可以看到在我的屏幕转储,图像恰好在文本的顶部/底部(我加了2 gre en行来形象化)。
文字和上边框之间的“空”的空间,是一个特定的字体(这是针对不同的字体不同)如何安排其内部高度内的字符。
现在,由于某种原因,如果你想“打破”这个并调整例如字体内部高度的图像(如在你的问题中,在顶部/底部边界之间),你需要添加“边距“某处。
要让文本流尽可能正常,你可以:
- 几个像素保证金/填充添加到图像元素
- 增加像素的一些额外的线条与图像完全透光性好,
注意:根据您需要的完美程度,您需要计算您使用的字体的“边距”(它可能会/可能会不同),字体大小,并且您还可能需要检查在不同的操作系统上也是如此。
“强制文本/图片” 到中心,你可以:
- 使用
display: table
- 使用
display: flex
(在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>
谢谢!最后,这在我看来是修复代码的最简单,最普通的方法。虽然不需要指定span.padding和img.margin,但默认值对我来说工作正常。 – Rop