범위 내 SVG가 텍스트와 동일한 줄에 없음

동시에 텍스트가있는 범위 안에 SVG 파일이 있습니다. 텍스트와 SVG는 같은 높이입니다. 그러나 SVG는 텍스트와 같은 줄에 있지 않습니다.범위 내 SVG가 텍스트와 동일한 줄에 없음

관련 jsfiddle : 당신이 볼 수 있듯이 https://jsfiddle.net/tcrnjd53/

, 페이스 북의 로고는 단지 샘플 텍스트처럼 빨간색 점선에 있어야합니다.

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가 텍스트와 동일한 줄에 없음

답변

관련 문제