แม้ว่ามันจะไม่ยาก แต่การจัดกึ่งกลางภาพในหน้าเว็บของคุณอาจเกี่ยวข้องมากกว่าที่คุณคิด เหตุผลหลักคือ แท็กเป็นองค์ประกอบแบบอินไลน์ดังนั้นจึงทำงานแตกต่างจากองค์ประกอบระดับบล็อก วิธีการบางอย่างใช้ HTML; คนอื่นใช้ CSS และบางคนคิดว่า "เหมาะสม" มากกว่าคนอื่น ๆ เนื่องจากไม่ได้คัดค้าน หากต้องการดำเนินการต่อให้เลือกวิธีจากรายการด้านล่างและทำตามคำแนะนำ

สำหรับการสนับสนุนใน HTML5 คุณควรใช้แอตทริบิวต์ลักษณะที่มีการ จัดข้อความ ตามค่า : กึ่งกลาง ด้านในขององค์ประกอบระดับบล็อก เช่น แท็ก

ตัวอย่างรหัส HTML

เคล็ดลับ: การเพิ่มสไตล์อินไลน์ตามที่แสดงด้านบนควรกระทำเพียงครั้งเดียวหากคุณต้องการจัดวางภาพหลายภาพให้อยู่กึ่งกลางคุณควรใช้คำแนะนำด้านล่างและสร้างคลาส CSS เพื่อช่วยลดรหัสซ้ำซ้อน

ตัวอย่างศูนย์ภาพโดยใช้รหัสด้านบน

การแปลงเป็นองค์ประกอบระดับบล็อก

วิธีหนึ่งที่คุณสามารถจัดกึ่งกลางภาพให้เหมาะสมคือการกำหนด องค์ประกอบเป็นองค์ประกอบระดับบล็อก ในการทำเช่นนี้ให้เพิ่มกฎไว้ที่ส่วนหัวของหน้าเว็บของคุณ (แสดงในตัวอย่างต่อไปนี้) หรือไฟล์ CSS ภายนอกที่เชื่อมโยง

ตัวอย่างรหัส HTML

 .centerImage {text-align: center; จอแสดงผล: บล็อก; } 

ด้วยรหัสนี้คุณสามารถใช้คลาส centerImage กับ แท็กโดยไม่ต้องซ้อนในองค์ประกอบระดับบล็อก วิธีนี้ใช้ได้กับหลายภาพ

ตัวอย่างรหัสภาพที่กึ่งกลาง

การใช้แท็ก

คุณสามารถจัดกึ่งกลางภาพโดยการ ติดแท็กใน แท็ก การกระทำนี้มุ่งเน้นที่และเฉพาะภาพบนหน้าเว็บ ควรสังเกตว่าวิธีนี้เลิกใช้ใน HTML5 และจะไม่ทำงานในเบราว์เซอร์ทั้งหมดต่อไป เราขอแนะนำให้ใช้วิธีนี้หากไม่มีคำแนะนำอื่น ๆ ที่กล่าวถึงข้างต้นทำงานในตำแหน่งที่คุณพยายามจัดกึ่งกลางภาพ

ตัวอย่างรหัส HTML