我正在尝试将 SVG 图标与文本对齐。我已经阅读了很多关于如何做到这一点的资料,使用 vertical-align: middle
是最好的选择。
我也能做到,但有一个问题我想得到答案。
我看到的所有资源都告诉你只将 vertical-align: middle
放在 img
元素上。例如
http://codepen.io/johnasp/pen/bqadn/
Vertically align text next to an image?
但在我的特殊情况下,我需要将 vertical-align: middle
放在 svg
和 span
元素上。差异非常微妙。但它就在那里。
这是 fiddle :
html, body {
font-size: 32px;
}
.icon {
height: 64px;
width: 64px;
vertical-align: middle;
}
span {
vertical-align: middle; // Try commenting this line
}
<ul>
<li>
<svg viewBox='0 0 16 16' class="icon" >
<path d="M7.5 1c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5zM7.5 14.5c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM8 8v-2h2v-1h-2v-1h-1v1h-2v4h2v2h-2v1h2v1h1v-1h2l-0-4h-2zM7 8h-1v-2h1v2zM9 11h-1v-2h1v2z">
</path>
</svg>
<span>3.4Km</span>
</li>
</ul>
尝试注释为 span
标记提供垂直对齐的行,然后看到文本会向上移动。
有人能告诉我为什么我需要垂直对齐我的 svg
和 span
标签,而不仅仅是 svg
吗? ?
最佳答案
您遇到问题的主要原因是您的图标没有位于 SVG viewBox 的中央。
你的viewBox是"0 0 16 16"
但是如果你检查它,图标实际上占据了"0 1 15 15"
.如果你更新 viewBox,它会更好地在线上,而不必垂直对齐你的 <span>
.
html, body {
font-size: 32px;
}
.icon {
height: 64px;
width: 64px;
vertical-align: middle;
}
span {
}
<ul>
<li>
<svg viewBox='0 1 15 15' class="icon" id="foo">
<path d="M7.5 1c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5zM7.5 14.5c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM8 8v-2h2v-1h-2v-1h-1v1h-2v4h2v2h-2v1h2v1h1v-1h2l-0-4h-2zM7 8h-1v-2h1v2zM9 11h-1v-2h1v2z">
</path>
</svg>
<span>3.4Km</span>
</li>
</ul>
关于html - 垂直对齐 SVG 图标旁边的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36529422/