인접한 img/input요소와 텍스트와의 세로정렬

마크업을 배울대 막 초급을때고 중급으로 들어오면서 마크업할때마다 헷갈렸던게

img와 input들과 인접한 텍스트들의 세로 정렬 문제였다. 단순히 vertical-aling:middle이 아니라 1px씩 조절해줘야하는 상황도 있엇는데 그럴때마다 해결은 하는데 항상 할때마다 다시 생각해내고 했던적이 한두번이 아니어서 시간이 생겨 한번 해당 사항을 정리해 보았다.

block과 inline의 특성을 모두 가진 display:inline-block을 쓰고 요소들을 vertical-align으로 정렬후 margin에 음수값으로 조절한다. 인접한 요소의 크기에 따라 부모 높이에 영향을 주니 잘 고려하자.

문서보기