홈 > 프로그래밍 > 웹 > 정보

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

드리머즈 0 21856

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


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

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


2ee790c8f4d5566a04c8636a95f1d08b_1544191583_3852.png
위 사진을 보면.. 제가 원하는 것은 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이 있으면 이상하게 동작하네요.


2ee790c8f4d5566a04c8636a95f1d08b_1544191856_6694.png
위 사진과 같이.. 왼쪽에 있던 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;을 주면 원하는 대로 동작합니다.


2ee790c8f4d5566a04c8636a95f1d08b_1544192056_3831.png
휴우~


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




0 Comments
제목
Category
State
  • 현재 접속자 7 명
  • 오늘 방문자 119 명
  • 어제 방문자 206 명
  • 최대 방문자 8,746 명
  • 전체 방문자 396,425 명
  • 전체 게시물 97 개
  • 전체 댓글수 18 개
  • 전체 회원수 49 명
Facebook Twitter GooglePlus KakaoStory NaverBand