gpt4 book ai didi

html - css:垂直对齐图像,文本在 span 内

转载 作者:太空宇宙 更新时间:2023-11-03 20:35:39 27 4
gpt4 key购买 nike

这里是我的问题的一个小演示...

<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/

最佳答案

How do I get it centered between the top and bottom borders?

您可以尝试使用 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>

关于html - css:垂直对齐图像,文本在 span 内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33582380/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com