เนื้อหา

• ขั้นตอน
• วิธีที่ 1 จาก 2: CSS (แนะนำ)
• วิธีที่ 2 จาก 2: แอตทริบิวต์ "align" ใน HTML

คุณลักษณะ align แท็ก html> เลิกใช้แล้วตั้งแต่ HTML5 แม้ว่าแอตทริบิวต์นี้จะยังใช้งานได้ในเว็บเบราว์เซอร์ส่วนใหญ่ ขอแนะนำให้คุณจัดแนวรูปภาพโดยใช้ Cascading Style Sheets (CSS) ในบทความนี้ เราจะแสดงวิธีจัดกึ่งกลางรูปภาพโดยใช้ CSS และแท็กที่เลิกใช้แล้ว align.

ขั้นตอน

วิธีที่ 1 จาก 2: CSS (แนะนำ)

1. 1 เพิ่มโค้ด HTML สำหรับรูปภาพ คุณจะใช้สไตล์ชีตแบบเรียงซ้อน (CSS) เพื่อจัดแนวรูปภาพ แต่คุณจะต้องวางบนหน้าโดยใช้ HTML ต่อไปนี้เป็นตัวอย่างการใช้แท็ก img> เพื่อแทรกรูปภาพลงในรหัสของคุณ:

   img src = "dog.webp" alt = "นี่คือรูปสุนัข">

   • แทน dog.webp แทนที่ชื่อไฟล์รูปภาพ และหลังจาก "alt" ให้ป้อนคำอธิบายของรูปภาพ ความหมาย ศูนย์กลาง สำหรับ "คลาส" อย่าเปลี่ยนเพราะคุณจะสร้างคลาส CSS ด้วยชื่อนั้น
2. 2 ค้นหาโค้ด CSS หากเว็บไซต์ของคุณมีไฟล์ CSS แยกต่างหาก ให้เปิดไฟล์นั้น หากไม่เป็นเช่นนั้น CSS มักจะอยู่ที่ด้านบนสุดของไฟล์ HTML ภายในแท็ก หัว>... เลื่อนไปที่ด้านบนของไฟล์เพื่อค้นหาแท็ก สไตล์> / สไตล์>.
   • ถ้าแท็ก สไตล์> / สไตล์> ไม่ เพิ่มพวกเขา อ่านบทความนี้สำหรับข้อมูลเพิ่มเติม.
3. 3 เพิ่ม CSS เพื่อจัดแนวรูปภาพ แทนที่จะป้อน "50%" คุณสามารถป้อนค่าอื่นเพื่อให้รูปภาพปรากฏบนหน้า คุณจะไม่สามารถจัดกึ่งกลางรูปภาพด้วยค่า "100%" ได้ ดังนั้นตัวเลขนี้จึงควรแตกต่างออกไป

   .center {แสดง: บล็อก; ระยะขอบซ้าย: อัตโนมัติ; ระยะขอบขวา: อัตโนมัติ; ความกว้าง: 50%; }

4. 4 บันทึกการเปลี่ยนแปลงของคุณ บันทึกไฟล์ HTML และไฟล์ CSS (ถ้ามี) สิ่งนี้จะทำให้ภาพอยู่กึ่งกลาง
   • ยังอยู่ในแท็ก img> สามารถเพิ่ม เพื่อจัดกึ่งกลางภาพอื่นๆ

วิธีที่ 2 จาก 2: แอตทริบิวต์ "align" ใน HTML

1. 1 สร้างย่อหน้าใหม่ แม้ว่าวิธีการจัดกึ่งกลางรูปภาพนี้จะเลิกใช้แล้ว แต่ก็ยังใช้ได้ในหลายเบราว์เซอร์ อย่างไรก็ตาม เราขอแนะนำให้ใช้ CSS เพื่อให้ไซต์ทำงานได้เมื่อเบราว์เซอร์หยุดสนับสนุนแอตทริบิวต์ที่ระบุ โปรดจำไว้ว่าคุณลักษณะ align จะจัดกึ่งกลางรูปภาพภายในองค์ประกอบที่ล้อมรอบเท่านั้น (เช่น ภายในแท็ก p> / p> หรือ div> / div>). ตัวอย่างเช่น ในไฟล์ HTML เราจะสร้างย่อหน้าใหม่โดยการเพิ่ม p> ในบรรทัดแยกต่างหาก
2. 2 เพิ่มโค้ด HTML สำหรับรูปภาพ ป้อนรหัสต่อไปนี้หลังแท็ก p>... ใช้ตัวอย่างนี้เป็นแนวทาง:

   p> img src = "dog.webp" alt = "รูปภาพ" align = "กลาง">

   • แทน dog.webp แทนที่ชื่อไฟล์รูปภาพ และหลังจาก "alt" ให้ป้อนคำอธิบายของรูปภาพ
   • แอตทริบิวต์ตรงกลางบอกให้เบราว์เซอร์แสดงรูปภาพที่กึ่งกลางของหน้า
3. 3 ปิดแท็กย่อหน้า เมื่อต้องการทำเช่นนี้ ให้เพิ่ม / p> หลังแท็กรูปภาพ รหัสที่เสร็จแล้วควรมีลักษณะดังนี้:

   p> img src = "dog.webp" alt = "รูปภาพ" align = "กลาง"> / p>

4. 4 บันทึกการเปลี่ยนแปลงของคุณ สิ่งนี้จะทำให้ภาพอยู่กึ่งกลาง