CSS - vertical-align

vertical-align이라는 속성은 한줄에 있는 인라인 요소들의 수직 정렬을 맞춰주는 역할을 하는데 기본 값으로 baseline값을 갖는다. 그렇기 때문에 아래와 같이 right-text의 폰트 사이즈를 작게 줄였을때 위치가 left-text의 baseline에 맞춰지게 되는것이다.

기본값 baseline

vertical-align : top

그렇기 때문에 인라인 요소를 정렬 할때 보통 많이들 middel로 주게 된다.

그런데 이 방법에는 문제가 있다. 이 글은 font에 대한 이해가 필요하므로 다음 글을 꼭 읽고오자.

https://simsimjae.tistory.com/331 

에서 설명 했듯이, 폰트는 font-size와 line-height값을 갖는다. 그런데 이 두개의 값은 폰트 디자이너가 임의로 설정한 값이기 때문에 폰트마다 위, 아래 공간이 다를 수 있다.

위의 파란색 글씨를 보자. 아래부분은 거의 여백이 없는데 윗부분이 여백이 좀 있는걸 볼 수 있다. 이건 저 폰트의 디자이너가 저렇게 만들었기 때문이다. 이상태로 vertical-align:middel;로 두 개의 span을 수직 정렬 할 경우 약간씩 위치가 안맞을 수가 있다. 인라인 요소는 좌우 여백만 줄 수 있고 상하 여백은 줄 수없기 때문에 두개의 span을 inline-block 속성으로 바꾼다음에 적절한 상하 패딩을 줘서 정확한 가운데 수직 정렬을 할 수 있게 끔 해보자.

 

.right-text {
    display: inline-block;
    background-color: aqua;
    padding : 0 0 0.2em;
    font-size: 0.5em;
}

인라인블록 속성으로 바꿨고 하단에 0.2em 패딩을 줬다.(폰트 사이즈에 따라 유동적으로 바껴야 하므로 em단위를 사용함)

 

확실히 위의 파란 글씨와 달라진것이 보인다. 이제 글자가 정확히 가운데에 있다.

이 상태로 vertical-align:middle;을 준다면 좀더 정확한 수직 정렬이 가능해질것이다.

 

얼추 좀 더 정확히 수직 정렬이 되어 보인다. 하지만 이 방식도 문제가 있다.

이번에는 영어 사이에 한글을 섞어 보았는데. 뭔가 가운데 정렬이 맞지 않는 느낌이 든다.(한글은 한글끼리 영어는 영어끼리 중앙정렬된 느낌이라고 할까??)

vertical-align : middle;이라는 속성이 보통 폰트의 line-height(칠해진 전체 부분)의 중간이라고 생각하는 사람들이 많은데, 그게 아니라 폰트 컨텐츠 영역의 중간으로 정렬하는것이다. 영어와 한글의 컨텐츠 영역이 다르기 때문에 위와 같은 현상이 발생한것이다.

 

그렇기 때문에 수직 정렬을 가장 정확히 하고, 크로스 브라우징 까지 생각한다면 다음과 같은 방법을 추천한다.

 

 

.left-text {
    display: inline-block;
    background-color: orange;
    font-family: 'Georgia';
    vertical-align: top;
    padding : 0 0 0.1em;
}

.right-text {
    display: inline-block;
    background-color: aqua;
    padding : 0 0 0.2em;
    font-size: 0.5em;
    margin-top: 0.8em;
    vertical-align: top;
}

 

즉, vertical-align을 top으로 하고 마진을 줘서 가운데 정렬 시키는 방법이다.(폰트 사이즈에 따라 유동적이어야 하므로 em단위를 주도록 하자.)

 

이 방법이 아까보다 확실히 더 중앙정렬이 제대로 된것같은 모습이다.

 

정리를 하자면 다음과 같다.

좀 더 정확한 수직 정렬을 위해서는

 

1. 인라인요소를 인라인 블럭으로 만든다음 상하 패딩을 적절히 줘서 글자가 가운데 오게끔 한다.

2. 그 상태에서 vertical-align:top;을 주고

3. 마진탑을 줘서 가운데로 땡긴다.