[CSS] table내에 위치한 <input> 중앙(가운데)정렬하기
드리머즈
정보
0
24187
2018.12.07 23:14
html에서 display:table을 사용하면.. table내에 위치한 table-row, table-cell의 균등분배?가 편리합니다.
균등분배라는 것이 적합한 용어인지는 모르겠으나 한 줄(행)에 몇 개의 cell을 배치하고.. 원하는 width로 분배할 수 있습니다.
이런 장점이 있어 사용했는데.. 몇몇 경우에서 어이없게 레이아웃이 잡히는 경우가 있었습니다.
위 사진을 보면.. 제가 원하는 것은 50:50으로 나눠진 영역 중에서 왼쪽 <input>있는 부분에서 <input>을 중앙정렬하는 것입니다.
일반적인 <div>내의 <input>을 중앙정렬 하기 위해선
1 2 | <div style="display:block"> <input style="text-align:center; display:block; margin: 0 auto;" type="text" id="datepicker"> | cs |
위 코드와 같이 div와 input에 display:block를 주고 자식인 input에는 margin: 0 auto;를 줍니다. 일반적인 div와 input이라면 잘 동작하는데 문제는.. table내에 div와 input이 있으면 이상하게 동작하네요.
위 사진과 같이.. 왼쪽에 있던 table-cell의 높이가 높아져버렸습니다 ㅡ.ㅡ;; 이런 이상한 동작이 왜 생기는지는 모르겠지만.
1 2 3 4 5 | <div style="display:table-cell; width:50%; vertical-align: middle;"> <div style="display:block"> <input style="text-align:center; display:block; margin: 0 auto;" type="text" id=""> </div> </div> | cs |
table-cell에 vertical-align: middle;을 주면 원하는 대로 동작합니다.
휴우~
참고: https://stackoverflow.com/questions/19184052/center-align-with-table-cell