[CSS] table내에 위치한 <input> 중앙(가운데)정렬하기

html에서 display:table을 사용하면.. table내에 위치한 table-row, table-cell의 균등분배?가 편리합니다.

균등분배라는 것이 적합한 용어인지는 모르겠으나 한 줄(행)에 몇 개의 cell을 배치하고.. 원하는 width로 분배할 수 있습니다.

이런 장점이 있어 사용했는데..  몇몇 경우에서 어이없게 레이아웃이 잡히는 경우가 있었습니다.

위 사진을 보면.. 제가 원하는 것은 50:50으로 나눠진 영역 중에서 왼쪽 <input>있는 부분에서 <input>을 중앙정렬하는 것입니다.

일반적인 <div>내의 <input>을 중앙정렬 하기 위해선

위 코드와 같이 div와 input에 display:block를 주고 자식인 input에는 margin: 0 auto;를 줍니다. 일반적인 div와 input이라면 잘 동작하는데 문제는.. table내에 div와 input이 있으면 이상하게 동작하네요.

위 사진과 같이.. 왼쪽에 있던 table-cell의 높이가 높아져버렸습니다 ㅡ.ㅡ;; 이런 이상한 동작이 왜 생기는지는 모르겠지만.

table-cell에 vertical-align: middle;을 주면 원하는 대로 동작합니다.

휴우~

참고: https://stackoverflow.com/questions/19184052/center-align-with-table-cell