1. div 내의 이미지 가운데 정렬하기(horizontal align)
첫번째 방법 : style을 직접 입력하기
<div style="position:absoulte;width:100%;height:100%;">
<img src="contents.jpg" style="position:absoulte;width:100%;height:100%;">
</div>
두번째 방법 : style sheet를 사용하기
<HTML>
<HEAD>
<TITLE>이미지 정렬</TITLE>
</HEAD>
<style type="text/css">
#img_container {
position:absolute;
width:100%;
height:100%;
}
#img_container img {
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
<BODY>
<div id="img_container">
<img src="contents.jpg" >
</div>
</BODY>
</HTML>
2. div 내의 이미지 수평,수직 모두 가운데 정렬하기(horizontal and vertical align)
<HTML>
<HEAD>
<TITLE>이미지 정렬</TITLE>
</HEAD>
<style type="text/css">
#img_container {
position:absolute;
width:100%;
height:100%;
}
#img_container img {
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
</style>
<BODY>
<div id="img_container">
<img src="contents.jpg" >
</div>
</BODY>
</HTML>
?
열기 닫기