SVG inside span n'est pas sur la même ligne que le texte

J'ai un fichier SVG dans un intervalle avec du texte en même temps. Le texte et le SVG ont la même hauteur. Cependant, le SVG n'est pas sur la même ligne que le texte.SVG inside span n'est pas sur la même ligne que le texte

jsFiddle pertinente: https://jsfiddle.net/tcrnjd53/

Comme vous pouvez le voir, le logo facebook doit être sur la ligne pointillée rouge, tout comme le texte de l'échantillon.

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>

Source

2017-09-30 Christof Kälin

La valeur par défaut vertical-align propriété est baseline - changer à bottom. Voir la démo ci-dessous:

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>

Source

2017-09-30 14:08:51 kukkuz

CSS vertical-align propriété pourrait aider le plus indiqué dans l'extrait. Choisir la valeur appropriée dépend de vous. Pour mieux comprendre ce que je veux dire, essayez les valeurs suivantes top, text-top, middle, bottom, text-bottom et voir les différences. Vous pouvez appliquer une valeur fixe ou en pourcentage si cela vous convient le mieux.

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>

Source

2017-09-30 14:09:02

SVG inside span n'est pas sur la même ligne que le texte

Répondre

Questions connexes