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

Feb
13
2008

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

7,722 views

Code ของคุณ ท่่านอื่นๆ ง่ายกว่าครับ ขอบคุณมา ณ ที่นี้ด้วย

scroll ลงไปดูล่างๆ

Written by Pipo in: Developer | Tags: center, css, div

15 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
ขอลองหน่อยนะครับผม

Comment by หนึ่ง — December 21, 2009
margin:0 auto;

Comment by ภาพทำเว็บไซต์ — March 29, 2010
กำลังหาอยู่เลยครับ

Comment by ถุงกรองฝุ่น — March 29, 2010
[...] http://sixhead.com/2008/02/13/css-div-center-screen/ [...]

Pingback by Center Div Block « Basketman's Blog — June 18, 2010
ตอนแรก ผมใช้

margin:0 auto; เจ๋งกว่าเยอะ ขอบคุณครับ

Comment by webmaster — October 14, 2010
Code จาก Youtube นี้แน่จิงๆ อ่าเอาไปลองใช้

margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
position: relative;
width: 970px;

Comment by PSBIGN13 — November 29, 2010
แจ่มเลยพี่น้อง

Comment by TomDyThai[dot]Com — March 21, 2011
ลองแล้ว ใช้ได้เลย

ขอบคุณครับท่าน

Comment by ครีมสมุนไพรจุฬา — July 6, 2011
ลองแล้วได้เลย หามานานและ thank

Comment by rct — November 21, 2011