[CSS] DIV 영역안에 텍스트 세로 중앙 정렬하는 방법
테이블을 사용할땐 별다른 고민을 해보지 않았던 텍스트 세로 정렬입니다. 테이블을 사용할 당시에는 셀 안에 텍스트의 세로정렬은 큰 고민 없이 가능했습니다. 하지만 DIV안에 텍스트를 넣게 되는 경우 텍스트 새로 정렬에 대한 고민을 시작하게 됩니다. 가장 심플한 방법은 아래와 같습니다. <style type=”text/css”> .div {display:table; width:300px; height:200px;} .p {display:table-cell; text-align:center; vertical-align:middle;} </style> <div class=”div”> <p class=”p”>Sample Text</p> </div> 여기서 중요한 2가지는.. 1. 텍스트를 감싸는 블록의 height 값이 명확해야 한다. 2. 부모 앨리먼트(div)의 css 속성을 display:table; 자식 앨리먼트(p)의 css 속성을 display:table-cell; 로 지정해주면…
