ใช้ CSS เพื่อระบุลักษณะที่ปรากฏของเว็บเพจ
ตัวเขียนโค้ดของเว็บเพจใช้ Hypertext Markup Language เพื่อบอกเว็บเบราว์เซอร์ถึงวัตถุประสงค์การทำงานของแต่ละองค์ประกอบในหน้า เช่น ย่อหน้า หัวเรื่อง หรือรายการ ตั้งแต่ HTML 4 Cascading Style Sheets ได้จัดเตรียมวิธีให้โค้ดเดอร์บอกเบราว์เซอร์ว่าองค์ประกอบแต่ละอย่างควรมีลักษณะอย่างไร โดยแยกจากการกำหนดว่าองค์ประกอบเหล่านั้นคืออะไร หน้าสามารถมีสไตล์ CSS ที่แตกต่างกันสำหรับอุปกรณ์ประเภทต่างๆ เช่น โทรศัพท์มือถือและคอมพิวเตอร์เดสก์ท็อป ทำให้รูปลักษณ์ของหน้าเปลี่ยนแปลงได้โดยที่ Coder ไม่จำเป็นต้องเปลี่ยน HTML ใช้คุณสมบัติ CSS เพื่อจัดกึ่งกลางรูปภาพ
ขั้นตอนที่ 1
วางแท็ก "img" ในไฟล์ HTML ที่คุณต้องการให้รูปภาพของคุณแสดงบนเว็บเพจ ต้องอยู่ระหว่างแท็ก "body" และหลังแท็ก "h1" ตัวอย่างเช่น,
วีดีโอประจำวันนี้
นี่คือข้อความของคุณ
กำหนดรูปภาพชื่อ photo.jpg ที่มีความกว้าง 170 พิกเซลและสูง 50 พิกเซล เป็นสิ่งแรกบนหน้าต่อจากหัวเรื่องบนสุด
ขั้นตอนที่ 2
ใช้แอตทริบิวต์ CSS "ระยะขอบ" เพื่อกำหนดพื้นที่รอบๆ องค์ประกอบของหน้า เช่น รูปภาพ ค่า "อัตโนมัติ" สำหรับแอตทริบิวต์ระยะขอบจะแจ้งให้เว็บเบราว์เซอร์กำหนดปริมาณพื้นที่โดยอัตโนมัติ ดังนั้น,
กำหนดว่าพื้นที่รอบ ๆ รูปภาพถูกกำหนดโดยเบราว์เซอร์ขั้นตอนที่ 3
ใช้คุณสมบัติ "แสดง" เพื่อกำหนดวิธีการแสดงองค์ประกอบของหน้า ค่า "บล็อก" สำหรับคุณสมบัติการแสดงผลบอกให้เว็บเบราว์เซอร์แสดงองค์ประกอบในบรรทัดของตัวเอง โดยมีช่องว่างด้านบนและด้านล่าง ดังนั้น, กำหนดรูปภาพเดียวกัน แต่เพิ่ม "display: block;" ตอนนี้วางบนบรรทัดของตัวเอง
ขั้นตอนที่ 4
ดูเว็บเพจในเบราว์เซอร์ต่างๆ เพื่อตรวจสอบว่าภาพอยู่กึ่งกลางอย่างถูกต้อง
เคล็ดลับ
ใส่คำอธิบายภาพภายในแท็ก "alt" ทำให้ผู้อ่านที่มีความบกพร่องทางสายตาเข้าถึงหน้าเว็บของคุณได้มากขึ้น และช่วยให้มั่นใจได้ว่าโค้ดของคุณเป็นไปตามมาตรฐาน
