範圍內的SVG與文本不在同一行

我在同一時間範圍內有一個帶有文本的SVG文件。文字和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>

來源

2017-09-30 Christof Kälin

默認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>

來源

2017-09-30 14:08:51 kukkuz

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>

來源

2017-09-30 14:09:02

範圍內的SVG與文本不在同一行

回答

相關問題