SIR
목록으로

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

디자인아루즈
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전 조회 5,055
답변 3
목록

http://wappleedu.com/

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

고수님들 부탁드립니다.

#화면중앙 #중앙정렬

답변 3개

채택된 답변
+20 포인트

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

 

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

 

Copy 
<!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를 추가해주시면 됩니다.

 

Copy 
table { position:fixed; height:100%; }

table td { vertical-align:middle; }
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

안됩니다.
http://wappleedu.com/centertest.html

댓글을 작성하려면 로그인이 필요합니다.

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


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

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

 

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

 

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<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>

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 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]

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고