CSS 기본 튜토리얼

CSS 박스 모델

CSS3기본 튜토리얼

CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 수직-align(수직 정렬)

CSS 수직-align 수직 정렬 방식 속성은 내장 또는 표細胞 프레임의 수직 정렬 방식을 정의합니다. vertical-align은 CSS의 중요한 특성 중 하나입니다.신입자에게는 시작하기 어려울 수 있지만,문서 하단에 예제가 제공되어,이 속성을 빠르게 이해하고 배울 수 있도록 돕습니다.

그것이 무엇을 할 수 있는지

그것은 인라인 또는 인라인 블록 요소에 적용됩니다.
그것은 요소의 정렬 방식에 영향을 미칩니다.그러나 그것의 내용에 영향을 미치지 않습니다. (표細胞 제외)
표細胞에 적용되면,細胞 내용에 영향을 미칩니다.細胞 자체에 영향을 미치지 않습니다.

CSS 수직-align 수직 정렬 값

값	설명
기본선	요소의 기본선은 부모 요소의 기본선과 정렬됩니다. 이는 기본 값입니다.
length	이 속성은 지정된 길이로 요소의 길이를 증가하거나 감소시킵니다. 음수 값도 사용할 수 있습니다.
%	이 속성은 '줄 높이' 속성의 퍼센트로 요소를 증가하거나 감소시킵니다. 음수 값도 허용됩니다.
sub	요소를 정렬하여 하위와 같이 보입니다.
super	요소를 정렬하여 상표와 같이 보입니다.
top	요소의 상단은 줄의 가장 높은 요소의 상단과 정렬됩니다.
bottom	요소의 하단은 그 줄의 가장 낮은 요소와 정렬됩니다.
text-top	요소의 상단은 부모 요소의 글자 상단과 정렬됩니다.
middle	요소는 부모 요소의 중앙에 배치됩니다.
text-bottom	요소의 하단은 부모 요소의 글자 하단과 정렬됩니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	이 속성을 부모 요소에서 상속합니다.

CSS 수직 정렬 온라인 예제

예제

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
img.top　{　　
　　　　vertical-align:　text-top;　　
}　　
img.bottom　{　　
　　　　vertical-align:　text-bottom;　　
}　　
</style>　　
</head>　　
<body>　　
<p><img　src="/run/images/heart.jpg"　alt="قل비 모양"/>　이미지는 기본 정렬 방식으로 있습니다.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="قل비 모양"/>　이미지는 텍스트 상단 정렬 방식으로 있습니다.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="قل비 모양"/>　이미지는 텍스트 하단 정렬 방식으로 있습니다.</p>　　
</body>　　
</html>

테스트해 보세요‹/›

출력:

이미지는 기본 정렬 방식으로 있습니다.

이미지는 텍스트 상단 정렬 방식으로 있습니다.

이미지는 텍스트 하단 정렬 방식으로 있습니다.

CSS 흰색-space(공백)CSS 줄-height(줄 높이)