-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
form - 로그인 만들기 1 강좌에서, <div class="nav">~</nav> 부분 질문드립니다
19.04.15 11:51 작성 조회수 139
0
<div class="nav">
선생님은 여기서 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은 인라인 요소들을 수직 정렬하는데 사용되는 걸로 알고있었는데.. 왜 변화가 없는지 궁금합니다.
답변을 작성해보세요.
0
js Lee
질문자2019.04.15
선생님 말씀대로 크기와 위치가 다른 li를 넣어서 실험해보니, vertical-align이 적용되는 모습을 확인할 수 있었습니다. 감사합니다.
0
Dongho Lee
지식공유자2019.04.15
수직정렬은 line-height 를 활용해도 됩니다. 높이를 line-height로 지정하면 지정한 높이의 거의 가운데쯤 텍스트가 자리잡게 됩니다.
vertical-align은 오로지 inline과 table-cell 에만 적용됩니다. 그리고 inline 에서는 그 라인박스 안에서 텍스트끼리 또는 텍스트와 이미지의 정렬에 사용됩니다. 위 예제에서는 li 를 인라인으로 적용했지만 그 li 끼리 크기가 같고 또 li 와 li 의 정렬에 적용한 것이 아니라서 변화가 없는 겁니다. li 와 li 의 크기가 다르다면 그 li 끼리 vertical-align 으로 적용되는 변화를 확인할 수 있습니다.
위 예제처럼 li 를 인라인으로 적용하면 li 의 가운데 텍스트가 나타나게 하는 방법으로 line-height가 적당합니다.
답변 2