하나솔루션
Home > 고객센터 > 자료실

자료실

자료실

css div내의 이미지 정렬하는 방법

  • 하나솔루션
  • 2018-03-26 15:53:49
  • hit848
  • 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>
 
 
?
게시글 공유 URL복사
댓글[0]

열기 닫기

CUSTOMER CENTER

010-2343-0702

월-금 am 9:30 - pm 06:00
점심시간 : am 12:00 - pm 01:00
토ㆍ일 / 공휴일 휴무

무통장 입금계좌 안내

661-910388-38207

네임서버안내

1차 ns1.webit.kr
211.215.17.210
2차 ns2.webit.kr
211.215.17.212