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;
}

출처: http://stackoverflow.com/questions/8366053/vertical-align-inside-div-vertical-align-middle-not-working