html – 垂直对齐文本和SVG图标

概述我正在尝试将SVG图标与文本对齐.我已经阅读了很多关于如何使用它的信息来源,使用vertical-align：middle是它的最佳选择. 我也能够做到,但有一个问题我想要答案. 我见过的所有资源都告诉你只在img元素上放置vertical-align：middle.例如. http://codepen.io/johnasp/pen/bqadn/ Vertically align text nex 我正在尝试将SVG图标与文本对齐.我已经阅读了很多关于如何使用它的信息来源,使用vertical-align：mIDdle是它的最佳选择.

我也能够做到,但有一个问题我想要答案.

我见过的所有资源都告诉你只在img元素上放置vertical-align：mIDdle.例如.

http://codepen.io/johnasp/pen/bqadn/
Vertically align text next to an image?

但在我的特殊情况下,我需要在svg和span元素上放置vertical-align：mIDdle.差异非常微妙.但它就在那里.

这是小提琴：

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'  >      <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'  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图标全部内容，希望文章能够帮你解决html – 垂直对齐文本和SVG图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。