최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

해상도 1024 x768의 브라우저 중앙정렬은 다음과 같다.

 

1. position : absolute (포지션은 크게 상관없음 relative 등 으로 해도..)

 

2. 높이와 가로를 각각 브라우저의 50% 위치로 지정한뒤 magin으로 높이/2, 가로/2 로 빼주면 정중앙으로 이동된다.

 

3. 그러면 width:1024, height:768 이고 top:50%, left:50% 적어준뒤에, margin:-384px 0 0 -512px

  

실무적용사례) 10번 라인을 주목


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>serpiko contents</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style type="text/css" media="screen">
      html, body { height:100%; background-color: #ffffff;}
      body { margin:0; padding:0; overflow:hidden; }
      #flashContent {position:absolute;top:50%;left:50%;width:1024px; height:768px;margin:-384px 0 0 -512px;}
  </style>
 </head>

 <body>
  <div id="flashContent">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="768" id="beauty" align="middle">
    <param name="movie" value="beauty.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="wmode" value="window" />
    <param name="scale" value="showall" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="beauty.swf" width="1024" height="768">
     <param name="movie" value="beauty.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#ffffff" />
     <param name="play" value="true" />
     <param name="loop" value="true" />
     <param name="wmode" value="window" />
     <param name="scale" value="showall" />
     <param name="menu" value="true" />
     <param name="devicefont" value="false" />
     <param name="salign" value="" />
     <param name="allowScriptAccess" value="sameDomain" />
    <!--<![endif]-->
     <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
     </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
   </object>
  </div>
 </body>
</html>

 

댓글