我有一個svg,它有一些大的邊框,因爲它後面的文本不符合它。那麼我怎樣才能使文本與svg匹配。如何根據圖像將文本對齊到中心
圖1:顯然,文本和SVG沒有對齊
高於預期那麼,有沒有什麼辦法可以讓我的「儀表板」文本稍微有點兒上漲,或者SVG稍微下降一點「,這樣它的對齊纔是正確的,或者唯一的選擇是生成一個新的帶邊框修剪的SVG文件。請指導。
代碼段:
<ul class="nav side-menu">
<li><a>
<svg height = "30px" fill = "#AFAFAF" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<path d="M981.9,523.4c-25.8-60.7-62.6-115.3-109.5-162.3c-46.9-46.9-101.5-83.8-162.2-109.6c-62.9-26.7-129.6-40.3-198.2-40.3
s-135.3,13.6-198.2,40.3c-60.7,25.8-115.3,62.7-162.3,109.6c-46.9,46.9-83.6,101.5-109.4,162.3C15.3,586.4,2,653.1,2,721.7v14.3
C2,787.7,43.7,830,95.4,830h833.1c51.7,0,93.4-42.3,93.4-94.1v-14.3C1022,653.1,1008.7,586.4,981.9,523.4z M980,735.9
c0,28.6-22.8,52.1-51.4,52.1H535l0.1-82.4c6.8-3.4,12.8-8.6,17.3-15.3c9.2-13.9,106.5-199.7,106.5-199.7c7-10.6,4.2-24.9-6.4-31.9
c-10.6-7-24.8-4.2-31.9,6.4c0,0-134.4,161-143.7,174.9c-13.8,20.7-8.4,48.8,12.2,62.7L489,788H95.4C66.8,788,44,764.5,44,735.9
v-14.3c0-19.4,1-38.2,3.3-57l67,0.3c0,0,0,0,0,0c12.7,0,23-10.5,23-23.2c0-12.7-10.3-23.1-23-23.1L55,618.5
c22.4-99.1,76.2-186.3,150.4-250.7l43.2,43.2c4.5,4.5,10.4,6.7,16.3,6.7c5.9,0,11.8-2.2,16.2-6.7c9-9,9-23.5,0-32.5l-39.3-39.3
c70.5-49.9,155.4-80.9,247.1-85.4l-0.1,58.2c0,12.7,10.3,23,23,23c0,0,0,0,0,0c12.7,0,23-10.3,23-23l0.1-58.2
c91.5,4.4,176.3,35.3,246.7,85.1L742,378.4c-9,9-9,23.5,0,32.5c4.5,4.5,10.4,6.8,16.3,6.8c5.9,0,11.8-2.2,16.2-6.7l43.6-43.6
C892.6,431.8,946.6,519,969,618.3l-54.3-0.3c0,0,0,0,0,0c-12.7,0-23,10.5-23,23.2c0,12.7,10.3,23.1,23,23.1l62.1,0.1
c2.3,18.8,3.3,37.9,3.3,57.2V735.9z"/>
</svg> Dashboard
</a>
</li>
</ul>
而不是svg,您可以使用一些圖標字體,如font-awesome,以便您可以輕鬆添加任何圖標。它將與相應的文字對齊 –
對不起。 「儀表板」只是一個文本。我已經添加了代碼片段。請指導。 – Unbreakable
我有我自己的SVG,它實際上不存在於「font-awesome」庫中。而且我不知道如何將SVG轉換爲「圖標」,以便我的html不笨拙。這就是我在html中擁有大量SVG代碼的原因。 – Unbreakable