이미지가 화면 중앙에 오게 하고싶습니다.

이미지가 화면 중앙에 오게 하고싶습니다.

QA

이미지가 화면 중앙에 오게 하고싶습니다.

본문

http://wappleedu.com/

테이블로 처리했습니다. 좌우 중앙정렬은 잡겠는데 상하 정렬은 어떻게 처리하나요?

고수님들 부탁드립니다.

이 질문에 댓글 쓰기 :

답변 3

안녕하세요. 인아이디어입니다.

 

테이블 테그를 다 제거하고, img 태그에 하단과 같이 스타일을 적용하는 방법도 있습니다.

 


<!doctype html>
    <html lang="ko">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style>
                .img-fixed { position:fixed; top:0; left:0; right:0; margin:auto; bottom:0; }
            </style>
        </head>
        <body>
        
        <img src="http://wappleedu.com/wappleimg/intro/intro0423.jpg" class="img-fixed" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="circle" coords="364,365,170" href="../../p8-1.html">
            <area shape="poly" coords="535,735" href="#">
            <area shape="rect" coords="421,546,672,650" href="http://focam.co.kr">
            <area shape="circle" coords="731,366,168" href="../../p5-4.html">
            <area shape="circle" coords="913,177,168" href="http://wappleshop.com">
            <area shape="circle" coords="545,174,169" href="../../index3.html">
            <area shape="circle" coords="177,177,169" href="../../p4-1.html">
        </map>
        </body>    
    </html>

 

굳이 테이블로 계속 진행을 하신다면,  table의 크기가 화면의 크기가 같아야합니다.

그러므로 하단의 css를 추가해주시면 됩니다.

 


table { position:fixed; height:100%; }
table td { vertical-align:middle; }
<table width="100%" height="100%"border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle"><table width="1138" height="837" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="100%" align="center"><img src="wappleimg/intro/intro0423.jpg" width="1090" height="730" usemap="#Map" border="0" />
</td>
        </tr>
    </table></td>
  </tr>
</table>

이렇게 했는데요.. 상단에 붙습니다.

  전체 소스를 다시 적어주시면 좋을것같습니다.
하단은 제가 테스트해본 결과 중앙으로 오는 소스입니다.


<!doctype html>
	<html lang="ko">
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
			<style>
				.img-fixed { position:fixed; top:0; left:0; right:0; margin:auto; bottom:0; }
			</style>
		</head>

		<body>
			<img src="http://wappleedu.com/wappleimg/intro/intro0423.jpg" usemap="#Map" class="img-fixed" />
			<map name="Map" id="Map">
				<area shape="circle" coords="364,365,170" href="../../p8-1.html">
				<area shape="poly" coords="535,735" href="#">
				<area shape="rect" coords="421,546,672,650" href="http://focam.co.kr">
				<area shape="circle" coords="731,366,168" href="../../p5-4.html">
				<area shape="circle" coords="913,177,168" href="http://wappleshop.com">
				<area shape="circle" coords="545,174,169" href="../../index3.html">
				<area shape="circle" coords="177,177,169" href="../../p4-1.html">
			</map>
		</body>	
	</html>

HTML5에서 valign은 삭제되었습니다. 더이상 사용하시면 안 됩니다. 대신 CSS의 vertical-align을 사용하셔야 합니다.


가운데 정렬을 위해서 테이블을 사용하는 방식도 최근에는 지양되는 방식입니다.

middle 정렬하는 방법은 몇 가지가 있는데, 개인적으로 다음과 같은 방식이 가장 깔끔하다고 생각합니다.

 


img {
    display: block;
    margin: 0 auto;
    width: 590px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

 

기본 문법이 익숙하지 않으신 것 같은데 CSS를 좀 공부하신 뒤에 작성하시는 것을 추천드립니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,161 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT