두 가지 크기의 텍스트를 세로로 정렬하는 방법은 무엇입니까?

텍스트를 블록 중앙에 수직으로 정렬하는 것을 알고 있으며, 행 높이를 블록의 동일한 높이로 설정합니다.

그러나 중간에 단어가있는 문장이 있다면 그것은 2em. 전체 문장의 행 높이가 포함 블록과 동일한 경우 큰 텍스트는 세로로 정렬되지만 작은 텍스트는 큰 텍스트와 동일한 기준선에 있습니다.

두 크기의 텍스트가 세로로 정렬되도록 설정하면 큰 텍스트가 작은 텍스트보다 낮은 기준선에 배치됩니다.

vertical-align:middle;인라인 컨테이너를 사용해 보 시겠습니까?

편집 : 작동하지만 모든 텍스트는 다음과 같이 인라인 컨테이너에 있어야합니다.

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

"vertical-align"의 기본값이 기준이므로 현재보고있는 기능이 정확합니다. 원하는 것 같습니다 vertical-align:top. 다른 옵션이 있습니다. W3Schools 에서보기 .

편집 W3Schools는 자신의 행동을 정리하지 않았으며 여전히 조잡한 (기껏해야) 정보 소스 인 것처럼 보입니다. 이제 sitepoint를 사용 합니다 . 사이트 포인트 첫 페이지의 맨 아래로 스크롤하여 참조 섹션에 액세스하십시오.

두 세트의 텍스트는 동일한 고정 라인 높이와 수직 정렬 세트를 가져야합니다.

 span{
     vertical-align: bottom;
     line-height: 50px;
}

기술적으로는 불가능하지만 고정 된 텍스트 크기가있는 경우 위치 (상대적)를 사용하여 더 큰 텍스트를 아래로 이동하고 줄 높이를 더 작은 텍스트로 설정할 수 있습니다 (이 큰 텍스트는 이렇게 표시되어 있다고 가정합니다). CSS 선택기로 사용할 수 있습니다.)

백분율 크기를 사용하여 부모의 line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

쉬운 방법-플렉스 사용 :

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

옵션은 다른 크기의 텍스트가 자체 셀에있는 표를 사용하고 각 셀에서 align : middle을 사용하는 것입니다.

예쁘지 않고 모든 경우에 작동하지는 않지만 간단하고 모든 텍스트 크기에서 작동합니다.

이것은 작동합니다

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>