form - 로그인 만들기 1 강좌에서,
~ 부분 질문드립니다

Question

아이디/비밀번호 찾기 회원가입 Open ID 선생님은 여기서 nav안에 있는 li들을 수직정렬하기 위해, padding을 사용하셨습니다. 또, 수평 중앙 정렬을 위해서 display: inline과 text-align: center를 사용하셨습니다. 여기서, li가 display: inline속성으로 바뀌었다면, vertical-align: middle;을 이용해서도 수직을 맞출 수 있을 거 같았습니다. 그래서 padding을 빼고, display: table, display: table-cell, vertical-align: middle;을 사용했을 때는 li들이 수직 중앙 정렬이 되는 것을 확인했습니다. 그런데, display: table을 이용하지 않고 vertical-align: middle만 사용할 때는 아무런 변화가 없었습니다. vertical-align: middle은 인라인 요소들을 수직 정렬하는데 사용되는 걸로 알고있었는데.. 왜 변화가 없는지 궁금합니다.

js Lee · Answer

선생님 말씀대로 크기와 위치가 다른 li를 넣어서 실험해보니, vertical-align이 적용되는 모습을 확인할 수 있었습니다. 감사합니다.

Dongho Lee · Answer

수직정렬은 line-height 를 활용해도 됩니다. 높이를 line-height로 지정하면 지정한 높이의 거의 가운데쯤 텍스트가 자리잡게 됩니다. vertical-align은 오로지 inline과 table-cell 에만 적용됩니다. 그리고 inline 에서는 그 라인박스 안에서 텍스트끼리 또는 텍스트와 이미지의 정렬에 사용됩니다. 위 예제에서는 li 를 인라인으로 적용했지만 그 li 끼리 크기가 같고 또 li 와 li 의 정렬에 적용한 것이 아니라서 변화가 없는 겁니다. li 와 li 의 크기가 다르다면 그 li 끼리 vertical-align 으로 적용되는 변화를 확인할 수 있습니다. 위 예제처럼 li 를 인라인으로 적용하면 li 의 가운데 텍스트가 나타나게 하는 방법으로 line-height가 적당합니다.

form - 로그인 만들기 1 강좌에서, <div class="nav">~</nav> 부분 질문드립니다