S i X h E a D { ? }

div กับหน้าจอ กว้าง x ยาว เท่าไหร่ก็อยู่กลางหน้า

 
<div style="position: absolute; width: 1020px; height: 600px; left: 50%; margin-left: -510px; top: 50%; margin-top: -300px;">
ข้อมูลของเรา จะใส่ table ในนี้ก็ตามใจ อย่าไปกังวลไรมาก ทำงานให้ดูได้ก็จบ !
</div>
 

width: 1020px;

height: 600px;

left: 50%; margin-left: -510px;

top: 50%; margin-top: -300px;

6 Comments »

• 

  ผมแนะนำว่าในกรณีเวบทั่วๆ ไป อย่าไปคิดว่า user จะใช้ความละเอียดหน้าจอเหมือนกันหมดครับ

  วิธีเซ็ตให้ block อยู่ตรงกลาง ตั้ง margin: 0px auto; เอาก็ได้ครับ

  Comment by deans4j — February 14, 2008
• 

  ใช้แบบนี้กลางกว่าครับ ไม่ต้องคิดไรด้วย

  .center {
  float:none;
  margin:0 auto;
  position:absolute;
  }

  หรือถ้าไม่กลางจิงๆต้องแบบนี้แน่นอน

  .center {
  width:300px; /* จำเป็นต้องกำหนดความกว้างให้คงที่ */
  position:absolute;
  left:50%; /* ด้านซ้ายครึ่งจอ */
  margin-left:-150px; /*margin-left ติดลบครึ่งหนึ่งของความกว้าง */
  }

  Comment by Natz — March 3, 2008
• 

  หน้าจอแต่ละผู้ใช้ไม่เท่ากันต้องใช้ margin: 0px auto;
  กำกำกำ

  Comment by bon — June 4, 2008
• 

  เย้ ขอบคุณมากเลยค่ะที่เขียนสอนไว้ หามานาน^^

  Comment by ผ่านมาจ้ะ — August 8, 2008
• 

  เราเคยลองแบบ คุณ deans4j บอกแล้วมันไม่กลางอ่าค่ะ เราอาจจะลงโค้ดตรงไหนผิดไปก็ได้ >.<

  แต่ว่าแบบของคุณ Pipo ใช่ที่ต้องการเลย ขอบคุณมากจริงๆค่ะ ^0^

  Comment by ผ่านมาจ้ะ — August 8, 2008
• 

  กำหนด width ให้คงที่
  width: 980px
  margin:0 auto;
  ถ้าไม่ตรงกลางนะ เมลล์มาด่าได้เลย

  Comment by jackiller — September 17, 2008

RSS feed for comments on this post. TrackBack URL

Leave a comment