Categories
CSS HTML

CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง

หลายครั้งหลายหน ที่อยากจะจัดการให้ div ตัวนี้ div ตัวนั้นอยู่กึ่งกลาง แต่จะทำยังไงละ มีวิธีมาแนะนำครับ แต่ต้องเป็นกรณีที่เรารู้ความกว้าง และความสูงของ div ตัวนั้นนะครับ

หลายครั้งหลายหน ที่อยากจะจัดการให้ div ตัวนี้ div ตัวนั้นอยู่กึ่งกลาง แต่จะทำยังไงละ มีวิธีมาแนะนำครับ แต่ต้องเป็นกรณีที่เรารู้ความกว้าง และความสูงของ div ตัวนั้นนะครับ

CSS : จัด div ที่เราต้องการ ให้อยู่กึ่งกลาง

สมมติว่าเรามี div อยู่ตัวนึง อยากจะให้มันอยู่ตรงกลางจะทำยังไงดี เรารู้แล้วว่า div ตัวนี้กว้าง 200px และสูง 100px งั้นเรามาลองใช้ position แล้วให้ top:50% กับ left:50% แล้ว มันน่าจะอยู่ตรงกลางนะ ลองดู

[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
}
[/css]

ผลลัพธ์ที่เราได้ออกมาจะเป็นแบบนี้ครับ

CSS : วิธีจัดให้อยู่กึ่งกลาง [1]
ถ้าตั้งค่า top:50%; left:50%; จะได้ผลลัพธ์ดังรูป

จะเห็นได้ว่า ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ top:50%; left:50%; ให้ผลลัพธ์ในแบบนี้ ดังนั้นเราจะทำต่อโดยใช้ margin เพื่อดึง div ให้มาอยู่ตรงกึ่งกลาง คราวนี้ค่าที่เราจะใช้คิดค่ามาจากเอาความกว้างหาร 2 แล้วนำไปใส่เป็นค่าลบให้ margin-left และเอาค่าความสูงหาร 2 แล้วนำไปใส่เป็นลบให้ margin-top ซึ่งความกว้าง 200px และความสูง 100px จึงได้ค่าออกมาเป็น

[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
[/css]

จะทำให้ div ขยับตามที่เราตั้งค่าไว้

CSS : วิธีจัดให้อยู่กึ่งกลาง [2]
#box จะขยับไปด้านบน และด้านซ้ายตามรูป

ผลลัพธ์จึงออกมาเป็นดังรูป

CSS : วิธีจัดให้อยู่กึ่งกลาง [3]
ในที่สุด #box ก็อยู่กึ่งกลางแล้ว

11 replies on “CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง”

การเขียนแบบนี้ กับ margin: 0 auto; ใช้ต่างกันยังไงเหรอครับ 🙂

ปล. อยากจะให้เขียนบทความสอนใช้ grid บ้างอะครับ ^____^

เขียนแบบ margin: 0 auto; จะจัดกลางแค่แนวนอนครับ แต่ในทางแนวตั้ง จะอยู่ที่ตำแหน่งเดิม ไม่ได้อยู่ตรงกลางครับ

ปล.grid นี่คือพวก css framework ใช่มั้ยครับ ปรกติผมไม่เคยใช้เลย แต่ถ้ามีแนะนำให้ดูตัวไหนก็ได้นะครับ ถ้ามีเวลาผมจะไปศึกษามาเขียนครับ >_<

อ๋อครับ การเขียนแบบนี้เหมาะกับ box เล็กๆใช้รึเปล่าครับ ^^

ปล. ใช่ครับ เห็นคนอื่นเขาใช้กัน เลยอยากใช้บ้างแต่ใช้ไม่เป็น ^^ ขอบคุณมากค้าบบบบ >__<
ปล2. มีตัวไหนแนะนำบ้างค้าบบบ *o*

ไม่อะครับ ใช้กับ box อะไรก็ได้เลยครับ ที่เราทราบขนาดของ box ครับ เพื่อที่จะได้นำค่าความกว้าง และความสูง มาคำนวนหาค่าที่จะใส่ให้ margin-top และ margin-left ครับ

ปล. ผมก็ใช้ไม่เป็นครับ 555
ปล2. เนื่องจากใช้ไม่เป็น เลยยังไม่มีตัวไหนแนะนำเหมือนกันครับ เลยถามว่า สนใจตัวไหนอยู่หรือเปล่า เผื่อผมจะลองไปศึกษาดูในเวลาว่างครับผม

โอเคครับ เข้าใจแล้ววว ^^

ปล. เห็นเค้านิยมใช้ 960.gs กัน เลยจะลองใช้ตัวนี้อะครับ 

/* sidebar styles */ 
  #stumblr-sidebar     {width:200px; display:inline; float:right; margin-top:80px;}
  #logo { margin-bottom:10px; width:200px; overflow:hidden;}
  
  .side-widget { display:inline; float:left; clear:both; margin-bottom:20px; width:200px; overflow:hidden; background:url(../images/light/bg-row.png) top left  repeat-x; padding-top:15px;  }
  .side-widget ul { list-style: none;  margin:0px; padding:0px; width:180px;clear:both; margin-top:7px;   }
  .side-widget ul li { float: left;  display: block;  font-size: 13px; margin:0px; padding:0px; width:180px;     }
  .side-widget ul li a { display:block; line-height:35px; font-size:15px; padding-bottom:2px; padding-left:2px; font-weight:500; text-transform:none; }
  .side-widget .textwidget { font-size:12px; line-height:19px; color:#333;  }

คือเว็บผม http://iamnat.th.ht ผมอยากให้ logo กับเมนูที่เอามาใส่ sliebar มันเลื่อนตาม scrollbar นะครับ เวลาเลื่อนลงอ่านเนื้อหาด่านล่าง เมนูกับ logo ก็จะเลื่อนลงมาตามนะครับ ผมลองเพิ่มคำสั่ง position:fixed; top 2% แล้วมันได้ตามที่ต้องการนะครับ แต่ว่า เมนูมันจะล้นเข้ามาอยู่ในเนื้อหา ผมเลยลองกำหนดค่า right เพิ่มใส่ค่าเป้น % ลงไป หรือประมาณ 340px แต่มันก็มีปัญหาเวลาไปเจอจอขนาดอื่นๆ คือมันจะแสดงผลไม่เหมือนกันนะครับ ผมต้องทำยังไงบ้างครับ คือผมเพิิ่งเริ่มศึกษา css เลยนะครับ ต้องรบกวนด้วยนะครับ

ถ้าแบบนั้นมันต้องใช้ jQuery มาช่วยเหลือในการ detect ขนาดจอครับ

แล้วให้มันคำนวนเพื่อใส่ค่า right ที่เราต้องการลงไปครับ

งั้นตอบแบบนี้แล้วกันครับ

ถ้าใช้ css ล้วน ๆ มันทำไม่ได้ครับ ต้องใช้ตัวอื่นมาช่วยทำด้วยครับ

อาครับ อยากที่พี่บอกคือ ใช้ jQuery มา detect คือมาตรวจสอบของขนาดขอก่อนอะไรประมาณนี้หรือเปล่าครับ พอจะมีที่ให้ศึกษาไหมครับ คือผม ไม่มีความรู้เลยจริงๆ นะครับ

Leave a Reply

Your email address will not be published. Required fields are marked *