수직 정렬 속성의 상세 분석

수직 정렬 속성에 대한 자세한 분석 최근 수직 정렬 속성을 주의 깊게 연구한 결과 이 ​​"고급" CSS 표준은 실제로 다양한 브라우저에서 다르게 작동합니다.
기준선 하위 만찬 상단 텍스트-상단 하단 텍스트-하단 중간 및 다양한 길이 값(%, em, ex 등)을 포함하여 수직 정렬에 대한 값이 많이 있습니다. 제가 가장 과장되었다고 생각하는 가치인 바닥을 먼저 보여드리겠습니다. 코드는 다음과 같습니다:


그런 다음 다양한 브라우저에서 이 CSS의 효과를 살펴보십시오(그림은 상대 위치를 명확하게 볼 수 있도록 의도적으로 그렇게 만들어졌습니다).


글쎄요, 이 결과는 사실 매우 놀랍습니다.. 일반적으로 IE보다 Firefox가 더 정확하게 설명할 것이라고 생각하지만, Opera를 살펴보니 IE와 동일하고 Safari/Win은 Firefox 편입니다. . 솔직히 말해서 무슨 일이 일어나고 있는지 모르겠습니다.
나는 "CSS Definitive Guide (Second Edition)"를 주의 깊게 연구하고 W3C에 문의한 후 수직 정렬에 대한 다이어그램을 직접 만들었습니다.


W3C 정의에 따르면 인라인 요소의 수직 정렬이 다음과 같이 설정된 경우:

1. 기준선, 상단, 하단을 사용할 경우 요소의 기준선(또는 중간, 상단, 하단)을 그림 상단, 주변 텍스트 상단 등 주변 요소와 동일한 위치에 정렬합니다.
2. text-top 및 text-bottom을 사용하는 경우 요소의 상단(또는 하단)이 주변 요소의 텍스트 상단(또는 텍스트 하단)에 맞춰 정렬됩니다.
3. 기준선을 기준으로 길이(%, em, ex)가 위로 이동하므로 양수는 올라가고 음수는 내려갑니다.
4. 중간에 있는 경우 요소의 중심이 주변 요소의 중심과 정렬됩니다. 여기서 "중심"의 정의는 다음과 같습니다. 그림은 물론 높이의 절반이고 텍스트는 소문자 "x"의 정확한 중심인 기준선을 기준으로 0.5ex 위로 이동해야 합니다. 그러나 많은 브라우저에서는 ex의 단위를 0.5em으로 정의하는 경우가 많기 때문에 반드시 x의 정확한 중심이 아닐 수도 있습니다(예를 들어 위 그림에서 x의 높이는 10px이고 em은 18px이어야 하므로 두 값이 다릅니다).

그러나 위의 지침을 따랐음에도 불구하고 브라우저가 상황을 그렇게 다르게 해석한다는 사실이 마음을 흔들었습니다. 나는 이것이 왜 그런지 조사하기에는 너무 게으르다. 일반적으로 글꼴의 각 줄 위치에 대한 정의가 다르기 때문에 이 문제는 수직 정렬뿐만 아니라 인라인 텍스트 및 인라인 이미지의 구조에 대한 브라우저의 해석과도 관련이 있습니다. 그것과 많은 관련이 있습니다.