디자인검색
Home > 고객센터 > 자료실

자료실

자료실 css div내의 이미지 정렬하는 방법
2018-03-26 15:53:49
하나솔루션 조회수 354
119.203.229.226
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>
 
 
?

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns1.webit.kr
  211.215.17.212
상단으로 바로가기