이미지가 화면 중앙에 오게 하고싶습니다. 채택완료
http://wappleedu.com/">http://wappleedu.com/
테이블로 처리했습니다. 좌우 중앙정렬은 잡겠는데 상하 정렬은 어떻게 처리하나요?
고수님들 부탁드립니다.
답변 3개
안녕하세요. 인아이디어입니다.
테이블 테그를 다 제거하고, img 태그에 하단과 같이 스타일을 적용하는 방법도 있습니다.
</p>
<p><!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></p>
<p> <body>
<img src="<a href="http://wappleedu.com/wappleimg/intro/intro0423.jpg"" target="_blank" rel="noopener noreferrer">http://wappleedu.com/wappleimg/intro/intro0423.jpg"</a> class="img-fixed" usemap="#Map" /></p>
<p> <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="<a href="http://focam.co.kr">" target="_blank" rel="noopener noreferrer">http://focam.co.kr"></a>
<area shape="circle" coords="731,366,168" href="../../p5-4.html">
<area shape="circle" coords="913,177,168" href="<a href="http://wappleshop.com">" target="_blank" rel="noopener noreferrer">http://wappleshop.com"></a>
<area shape="circle" coords="545,174,169" href="../../index3.html">
<area shape="circle" coords="177,177,169" href="../../p4-1.html">
</map>
</body>
</html></p>
<p>
굳이 테이블로 계속 진행을 하신다면, table의 크기가 화면의 크기가 같아야합니다.
그러므로 하단의 css를 추가해주시면 됩니다.
</p>
<p>table { position:fixed; height:100%; }</p>
<p>table td { vertical-align:middle; }</p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
HTML5에서 valign은 삭제되었습니다. 더이상 사용하시면 안 됩니다. 대신 CSS의 vertical-align을 사용하셔야 합니다.
가운데 정렬을 위해서 테이블을 사용하는 방식도 최근에는 지양되는 방식입니다. middle 정렬하는 방법은 몇 가지가 있는데, 개인적으로 다음과 같은 방식이 가장 깔끔하다고 생각합니다.
</p>
<p>img {
display: block;
margin: 0 auto;
width: 590px;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
}</p>
<p>
기본 문법이 익숙하지 않으신 것 같은데 CSS를 좀 공부하신 뒤에 작성하시는 것을 추천드립니다.
댓글을 작성하려면 로그인이 필요합니다.
<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></p>
<p>이렇게 했는데요.. 상단에 붙습니다.
답변에 대한 댓글 1개
하단은 제가 테스트해본 결과 중앙으로 오는 소스입니다.
[code]
<!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>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
http://wappleedu.com/centertest.html