วันนี้เราจะลองจัดตำแหน่ง Susuwatari ให้อยู่กึ่งกลาง สิ่งมีชีวิตเล็กๆ นี้ที่มักเรียกว่า "เปיח" ชอบเคลื่อนที่อยู่ตลอดเวลา จึงต้องทำให้มันอยู่นิ่งๆ และอยู่กึ่งกลางเพื่อถ่ายรูปได้ เริ่มกันเลย!
หมายเหตุ: ขณะอ่าน โปรดอ้างอิงจาก repository ของบล็อกนี้
เพิ่มภาพลงใน HTML
ความต้องการในการจัดภาพให้อยู่กึ่งกลางเป็นเรื่องที่พบได้บ่อย สมมติว่าเรามีภาพ soot และเพิ่มเข้าไปด้วยแท็ก img แบบเดิม:
<img class="soot" src="soot.jpg" alt="soot!">
อย่าลืม: ขณะเขียนแท็กภาพ ให้จำไว้ว่าแท็กนี้ไม่สามารถมี child nodes ได้ นั่นคือเหตุผลที่เราไม่ปิดแท็ก แม้เบราว์เซอร์อาจไม่บ่นหากคุณมี </img> แต่ CSS ที่นำไปใช้อาจไม่ทำงาน ให้ปฏิบัติตามรูปแบบข้างต้น
ทันทีที่เราเพิ่มภาพโดยไม่มี CSS ภาพจะแสดงด้านซ้ายของหน้าตาม default flow:
เนื่องจากภาพถูกจัดตำแหน่งตาม default flow ของหน้า ซึ่งอยู่ด้านซ้าย เหมือนกับหัวข้อ
วิธีที่ 1: margin: 0 auto
วิธีง่ายที่สุดในการจัด soot ให้อยู่กึ่งกลางคือการนำ style ดังไปใช้กับ selector img:
img.soot { margin: 0 auto; display: block; }
เราเพิ่ม class name ให้กับ image selector เพื่อความเฉพาะเจาะจง กรณีที่เพิ่ม soot หลายตัว ต้องมั่นใจว่าทุกตัวอยู่กึ่งกลาง
ตอนนี้ลองตรวจสอบหน้าเว็บ ใช่แล้ว ภาพของเราถูกจัดให้อยู่กึ่งกลางแล้ว!
เกิดอะไรขึ้นบ้าง?
- คุณสมบัติ
marginรับพารามิเตอร์ 4 ค่า: สองค่าแรกสำหรับ top และ bottom สองค่าต่อมาสำหรับ left และ right ที่นี่เราบอกเบราว์เซอร์ให้กำหนด margin ซ้าย-ขวาเอง ซึ่งเบราว์เซอร์จะตั้งค่าเท่ากัน ทำให้ภาพอยู่กึ่งกลาง - คุณสมบัติ
displayมีค่าได้หลายอย่าง ในที่นี้เลือก 'block' ซึ่งบอกให้ element img ใช้ความกว้างเต็มที่และอยู่บรรทัดของตัวเอง ดังนั้นเมื่อใช้ margin จึงมั่นได้ว่า margin ถูกนำไปใช้กับความกว้างเต็มของภาพ จึงทำให้อยู่กึ่งกลาง
วิธีที่ 2: text-align: center;
เรายังสามารถจัด soot ให้อยู่กึ่งกลางได้โดยวางมันภายใน parent element สมมติว่า div แล้วใช้ text-align บน parent ในการจัดตำแหน่งภาพ ต้องเพิ่มภาพเข้าไปใน parent element (มักเรียกว่า container element):
.container { text-align: center; }
เนื่องจาก element div เป็น block container โดยธรรมชาติ จึงใช้ความกว้างเต็มที่ และ child elements จะถูกจัดให้อยู่กึ่งกลางในกรณีนี้คือภาพ soot!
สรุป
การออกเสียง Susuwatari อาจดูยาก (ลองพูดหลายครั้งดู) แต่การจัดภาพให้อยู่กึ่งกลาง จริงๆ แล้วง่ายมากใช่ไหม!
