CSS 텍스트 세로 정렬 vertical-align 사용 방법
텍스트 혹은 이미지와 텍스트 조합에서 세로축에 대한 정렬을 설정할 수 있는데 이때 사용하는것이 바로 vertical-align 입니다. vertical-align은 부모 요소와 자식 요소 사이에 사용되어지며 부모 요소는 반드시 inline 또는 inline-block 요소여야 합니다. 블록요소는 안 됩니다. 그렇기때문에 텍스트로 이루어진 문장에서 사용되어지거나 이미지와 텍스트가 같이 있는 경우에 사용됩니다. 사용 빈도는 그렇게 높지 않습니다. 블록요소를 세로정렬하는게 훨씬 깔끔하고 확실한 방법이기 때문입니다. 하지만 이것도 알아두면 분명 요긴하게 사용할때가 올 것입니다. 블록요소의 세로 정렬에 대한 방법은 아래의 글을 참고해주시기 바랍니다.
CSS flex align-items 자식요소 세로 정렬(배치)1
CSS flex align-content 자식요소 세로 정렬(배치)2
텍스트간 vertical-align
가장 기본이 되는 텍스와 텍스트 사이에서의 세로 정렬입니다. 먼저 예시를 살펴봅니다.
그런데 본문의 처음 부분에서 블록 요소는 안 된다고 언급했는데 위의 예제를 유심히 살펴보시면 분명 부모 요소는 p태그로 되어있습니다. p태그는 블록요소죠. 이게 어떻게 된 일이냐고 의아해하실 수 있지만 중요한건 p태그 안에 텍스트가 첨가되어있다는 것입니다. 즉 p태그 안쪽에 어떤 것들이 들어있느냐가 중요한 것입니다. 텍스트는 인라인요소죠. 그래서 세로 정렬 설정이 가능합니다. p태그 안에는 자식요소인 span 태그가 들어있습니다. span태그는 인라인요소 중 하나입니다.
부모 요소의 텍스트 크기를 키웠고 자식요소인 span 태그안의 텍스트는 작게 만들었습니다. 그래야 세로에 대한 정렬이 확실히 육안으로 확인되기 때문입니다. 먼저 위의 예제에서 사용된 vertical-align 각 옵션들에 대한 설명입니다.
baseline : 기본값. 소문자 x를 기준으로 하단 라인에 맞춤
top : 부모 요소의 상단에 맞춤
middle : 부모 요소의 중앙에 맞춤
bottom : 부모 요소의 하단에 맞춤
sub : 아래첨자 기준으로 맞춤
super : 위첨자 기준으로 맞춤
text-top : 부모 텍스트의 상단에 맞춤
text-bottom : 부모 텍스트의 하단에 맞춤
작성해놓고보니 설명이 더 어렵습니다. 사실 top, middle, bottom을 제외하고는 나머지는 거의 쓰지 않는다고 생각해도 무방합니다. 친효스킨에서도 middle 정도만 조금 사용했으며 나머지는 사용하지 않았습니다. 쓸 일이 없었죠. 말씀드렸듯 텍스트와 텍스트 사이에서의 세로 정렬이기에 레이아웃은 왠만하면 거의 블록요소이므로 vertical-align이 사용될일은 없습니다. 따라서 텍스트와 텍스트 사이에서 사용되는 경우에는 부모요소와 자식요소의 텍스트 크기가 차이가 있는 경우가 아닌 이상은 보통 동일한 크기와 스타일의 문장이나 문단이 쓰일 것이기에 vertical-align은 쓰일 일이 잘 없습니다.
적용되는 속성값
입력하는 값은 양수, 음수 모두 가능하며 px나 em등의 단위들도 적용됩니다. %도 적용됩니다.
이미지와 텍스트간 vertical-align
그나마 이따금씩 사용되는 경우가 바로 이미지와 텍스트의 세로 정렬입니다. 사실 이것도 블록 요소로 바꾸고나서 정렬하는게 훨씬 깔끔하고 정교하며 빠릅니다. 하지만 이것도 알아두면 유익하므로 빠르게 알아보겠습니다.
HTML 구조는 텍스트간 세로 정렬에서 사용된것과 큰 차이는 없습니다. p태그 안에 img 태그가 있고 바로 텍스트가 따라오는 구조입니다. 이미지로 살펴보니 텍스트간 사이에서 보다는 확실히 어떻게 적용되는지 알 수 있습니다. 하지만 미세한 위치 조절은 역시 블록요소로 변경 후 position이나 flex 정렬을 통해 설정하는게 더 정확해 보입니다. 끝.
