テキストをSVGアイコンの横に並べます。

Question

テキストの横にSVGアイコンを配置しようとしています。私はそれを行うための最良の選択肢であるvertical-align: middleを使用して、多くのソースを読みました。

私もそれを実行することができましたが、答えが必要な問題が1つあります。

私が見たすべてのリソースは、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' 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の中央に座っていなかったからです。

あなたのビューボックスは"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>