div 안에 image 정중앙 놓기
방법 1 > display: table; 이나 display: table-call 입니다. (* 해당 div을 table안에 넣을 때, 이상하게 동작할 수 있음)
<div style="width:438px; height:306px; display: table-cell; text-align: center; vertical-align: middle">
<img src="http://html5.edit.kr/images/mov_poster.png" width="100px" height="100px" />
</div>
출처: http://crlog.com/213
display: table-call; 란? The element is displayed as a table cell
관련 속성 정보: http://www.w3schools.com/cssref/pr_class_display.asp
방법 2 > 그냥 table안에 td로 넣기
<table>
<tr>
<td style="width:438px; height:306px; text-align: center; vertical-align: middle;">
<div>
<img src="http://html5.edit.kr/images/mov_poster.png" />
</div>
</td>
</tr>
</table>
Vertical align inside div, vertical-align: middle not working
현재 사용하고 있는 div에 중앙 정렬을 넣고 싶지만, 해당 css가 div안에서 적용이 되지 않습니다.
기본적으로 padding을 이용해서 정렬을 하는 방법입니다.
From css file :
#header {height:150px; text-align: center; vertical-align: middle;}
<div id="header">
<img alt="" id="logo" src="images/logo.png" />
</div>명쾌하지는 않지만 꽁수.
#logo
{
padding: 20px 0;
}