CSS 텍스트 세로 정렬 vertical-align 사용 방법
텍스트 혹은 이미지와 텍스트 조합에서 세로축에 대한 정렬을 설정할 수 있는데 이때 사용하는것이 바로 vertical-align 입니다. vertical-align은 부모 요소와 자식 요소 사이에 사용되어지며 부모 요소는 반드시 inline 또는 inline-block 요소여야 합니다. 블록요소는 안 됩니다. 그렇기때문에 텍스트로 이루어진 문장에서 사용되어지거나 이미지와 텍스트가 같이 있는 경우에 사용됩니다. 사용 빈도는 그렇게 높지 않습니다. 블록요소를 세로정렬하는게 훨씬 깔끔하고 확실한 방법이기 때문입니다. 하지만 이것도 알아두면 분명 요긴하게 사용할때가 올 것입니다. 블록요소의 세로 정렬에 대한 방법은 아래의 글을 참고해주시기 바랍니다.
CSS flex align-items 자식요소 세로 정렬(배치)1
CSS flex align-content 자식요소 세로 정렬(배치)2
텍스트간 vertical-align
가장 기본이 되는 텍스와 텍스트 사이에서의 세로 정렬입니다. 먼저 예시를 살펴봅니다.
See the Pen vertical-align (text) by rgy0409 (@rgy0409) on CodePen.
그런데 본문의 처음 부분에서 블록 요소는 안 된다고 언급했는데 위의 예제를 유심히 살펴보시면 분명 부모 요소는 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
그나마 이따금씩 사용되는 경우가 바로 이미지와 텍스트의 세로 정렬입니다. 사실 이것도 블록 요소로 바꾸고나서 정렬하는게 훨씬 깔끔하고 정교하며 빠릅니다. 하지만 이것도 알아두면 유익하므로 빠르게 알아보겠습니다.
See the Pen vertical-align (image-text) by rgy0409 (@rgy0409) on CodePen.
HTML 구조는 텍스트간 세로 정렬에서 사용된것과 큰 차이는 없습니다. p태그 안에 img 태그가 있고 바로 텍스트가 따라오는 구조입니다. 이미지로 살펴보니 텍스트간 사이에서 보다는 확실히 어떻게 적용되는지 알 수 있습니다. 하지만 미세한 위치 조절은 역시 블록요소로 변경 후 position이나 flex 정렬을 통해 설정하는게 더 정확해 보입니다. 끝.
