垂直對齊文本和SVG圖標

Question

我正在嘗試將SVG圖標與文本對齊。 我已經閱讀了很多關於如何使用它的信息來源，使用vertical-align: middle是它的最佳選擇。

我也能夠做到，但有一個問題我想要答案。

我見過的所有資源都告訴你只在img元素上放置vertical-align: middle 。 例如

http://codepen.io/johnasp/pen/bqadn/
垂直對齊圖像旁邊的文字？

但在我的特殊情況下，我需要在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' 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因為它在其他地方工作嗎？

Answer 1

您遇到問題的主要原因是因為您的圖標沒有集中在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>