이미지가 화면 중앙에 오게 하고싶습니다.
본문
답변 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를 좀 공부하신 뒤에 작성하시는 것을 추천드립니다.
답변을 작성하시기 전에 로그인 해주세요.
