1. html 문서 구조
<div>
<span>오늘은 말줄임표를 세로 중앙정렬을 해보려고 합니다.</span>
</div>
2. 말줄임표를 위한 css
div {
width: 200px; /*기본 style*/
height: 100px; /*기본 style*/
background: pink; /*기본 style*/
overflow: hidden; /*말줄임표에 필요한 속성*/
text-overflow: ellipsis; /*말줄임표에 필요한 속성*/
white-space: nowrap; /*말줄임표에 필요한 속성*/
}
div span {
background: yellowgreen;
}3. 중간 결과
4. 말줄임표를 세로 중앙으로 하기 위해 필요한 코드
div span {
background: yellowgreen;
vertical-align: sub; /* 말줄임표를 세로 중앙정렬하기 위해 추가한 속성*/
}5. 중간결과
6. 문제 발생
말줄임표가 세로 중앙된 것 처럼 보이지만 span 영역 위에 공간 생김
7. 발견된 문제 해결 코드
여러 방법을 시도해봤으나 span 영역위에 공간이 사라지지 않는다.
관공서 사이트를 보니 말줄임표가 세로 중앙정렬이 되어있는데 vertical-align 속성이 따로 없었다.
사이트를 좀 더 뒤져봐야겠다.
