วิธีจัดแนวรูปภาพและข้อความอย่างตอบสนอง

ขั้นตอนที่ 2: ใช้ CSS

บนคอนเทนเนอร์:

• ตอนนี้ ให้จัดเนื้อหาให้อยู่ตรงกลางโดยใช้ CSS กับ ' คอนเทนเนอร์ ' ระดับ.
• ตั้ง ' ดิ้น ” คุณค่าต่อทรัพย์สิน “ แสดง ” เพื่อสร้างเฟล็กบ็อกซ์
• ตั้ง “จัดรายการ ” ทรัพย์สินให้กับ “ ศูนย์ ” ค่าเพื่อจัดตำแหน่งให้อยู่กึ่งกลางในแนวตั้ง
• ตั้ง ' ปรับเนื้อหา ” ค่าคุณสมบัติเป็น “กึ่งกลาง” เพื่อจัดตำแหน่งให้อยู่กึ่งกลางแนวนอน
• สุดท้ายระบุค่า “ ศูนย์ ” สู่ทรัพย์สิน “ จัดข้อความ ” เพื่อจัดกึ่งกลางข้อความ

บน <รูปภาพ> : :

• ระบุ “ ความกว้างสูงสุด ” คุณสมบัติต่อมูลค่า “ ศูนย์ ” เพื่อให้แน่ใจว่ารูปภาพได้รับการปรับขนาดพร้อมกับคอนเทนเนอร์
• ระบุค่า “ อัตโนมัติ ” ถึง “ ความสูง ” คุณสมบัติเพื่อรักษาอัตราส่วนภาพของรูปภาพ

บนข้อความ:

• กำหนดขนาดตัวอักษรของข้อความเป็น “ 16px ” โดยระบุค่า “16px” ให้กับ “ ขนาดตัวอักษร '.
• กำหนดความกว้างของข้อความโดยกำหนด ' ความกว้างสูงสุด ” ทรัพย์สินมีค่าของ “ 390px ”:

สังเกตได้ว่าข้อความอยู่กึ่งกลางแนวตั้ง และรูปภาพอยู่กึ่งกลางแนวนอน:

ตัวอย่างที่ 2: จัดชิดซ้ายข้อความและรูปภาพที่ตอบสนอง

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

ขั้นตอนที่ 1: สร้างโครงสร้าง HTML

รหัส HTML เหมือนกับข้างบนที่ใช้ในตัวอย่าง

ขั้นตอนที่ 2: ใช้ CSS

บนคอนเทนเนอร์:

• ตั้ง ' ดิ้นทิศทาง ” มูลค่าทรัพย์สินถึง “ คอลัมน์ ” เพื่อซ้อนรายการในแนวตั้งบนหน้าจอขนาดเล็ก
• ตั้ง ' จัดรายการ ” มูลค่าทรัพย์สินถึง “ ดิ้นเริ่มต้น ” ไปทางซ้ายเพื่อจัดตำแหน่งรายการ
• สุดท้ายให้ตั้งค่าคุณสมบัติ “ จัดข้อความ ” ถึง “ ซ้าย ” คุณสมบัติเพื่อจัดข้อความชิดซ้าย

บน <รูปภาพ> : :

• เช่นเดียวกับที่ใช้ในตัวอย่างข้างต้น

บนข้อความ:

• เช่นเดียวกับที่ใช้ในตัวอย่างข้างต้น:

ผลลัพธ์ยืนยันว่าข้อความและรูปภาพจัดชิดซ้าย:

บทสรุป

หากต้องการจัดแนวรูปภาพและข้อความให้ตอบสนอง ขั้นแรกให้สร้างตารางหรือเลย์เอาต์แบบยืดหยุ่นใน CSS จากนั้นตั้งค่า “ จัดรายการ ” มูลค่าทรัพย์สินให้กับ “ ศูนย์ '. การทำเช่นนี้จะจัดแนวรูปภาพและข้อความให้ตอบสนองใน CSS บทความนี้ได้ให้คำแนะนำแก่ผู้ใช้ในการจัดแนวรูปภาพและข้อความอย่างตอบสนอง