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>
?
|
|
|