スパン内のSVGがテキストと同じ行にありません

Question

私は、同時にテキストを含むスパン内にSVGファイルを持っています。テキストとSVGは同じ高さです。しかし、SVGはテキストと同じ行にありません。

関連jsfiddle：あなたが見ることができるようにhttps://jsfiddle.net/tcrnjd53/

、Facebookのロゴは単なるサンプルテキストと同様に、赤の点線にする必要があります。

span { 
 
    font-size: 1em; 
 
    border-bottom: 1px dotted red; 
 
    zoom: 3; /* for easier readability */ 
 
} 
 

 
span svg { 
 
    fill: #3b5998; 
 
    height: 1em; 
 
}

<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>

Answer 1

デフォルトvertical-alignプロパティがbaselineある - bottomに変更します。デモは、以下を参照してください：

span { 
 
    font-size: 1em; 
 
    border-bottom: 1px dotted red; 
 
    zoom: 3; /* for easier readability */ 
 
} 
 

 
span svg { 
 
    fill: #3b5998; 
 
    height: 1em; 
 
    vertical-align: bottom; /* ADDED */ 
 
}

<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>

Answer 2

CSS vertical-alignプロパティは、スニペットに示すように助けることができます。適切な値を選択することはあなた次第です。私が何を意味するかをよりよく理解するには、次の値を試してくださいtop、text-top、middle、bottom、text-bottomとその違いを参照してください。あなたが最も適している場合は、固定値またはパーセンテージ値を適用することができます。

span { 
 
    font-size: 1em; 
 
    border-bottom: 1px dotted red; 
 
    zoom: 3; /* for easier readability */ 
 
} 
 

 
span svg { 
 
    fill: #3b5998; 
 
    height: 1em; 
 
    /* 
 
    vertical-align:text-top; 
 
    */ 
 
    vertical-align:-0.1875em; 
 
}

<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>