画像ごとにテキストを中央に揃える方法

Question

私は1つのsvgを持っていて、大きなボーダーを持っています。そのため、それに続くテキストはそれと整列しません。だから私はそれをsvgと一致させるためにテキストを整列させることができます。

画像1：明らかにテキストやSVGが揃っていない

画像2：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> &nbsp; &nbsp; Dashboard 

      </a> 
    </li> 
</ul> 

Answer 1

画像にvertical-align: middle;を追加します。通常、イメージはベースラインの垂直方向の揃ったインライン要素です。

svg { vertical-align: middle; }

<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> &nbsp; &nbsp; Dashboard 
 

 
      </a> 
 
    </li> 
 
</ul>

Answer 2

あなたがsvg要素を整合させるのに役立ちます。このCSSコードを試してみてください。 margin-topプロパティは何

svg { 
    margin-top: 20px; /*you can change this later to make the result closer*/ 
} 

は、所望の結果によってダウン特定の要素を移動です​​。