วิธีเขียนคำบรรยายใต้รูปภาพ – ซีเอสเอส

” องค์ประกอบที่มีคลาส “ .image-ผู้ถือ '. จากนั้นใช้คุณสมบัติ CSS ต่อไปนี้:

.image-ผู้ถือ {

ตำแหน่ง : ญาติ ;

ความสูง : 100px ;

ความกว้าง : 200px ;

ขอบ : อัตโนมัติ ;

}

รายละเอียดของคุณสมบัติที่กล่าวถึงข้างต้นอธิบายไว้ด้านล่าง:

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

คำอธิบายสไตล์ใน CSS

ในขั้นตอนนี้เราจะเข้าถึงคลาสทั้งสองที่มีชื่อ “ ผู้ถือภาพ ' และ ' img-คำบรรยายภาพ ” และใช้คุณสมบัติ CSS ต่อไปนี้:

.image-ผู้ถือ .img-คำบรรยายภาพ {

ตำแหน่ง : แน่นอน ;

จัดข้อความ : ศูนย์กลาง ;

ตัวอักษรน้ำหนัก : ตัวหนา ;

ความกว้าง : 200px ;

ความสูง : 50พิกเซล ;

ซ้าย : 0px ;

สี : #f80909 ;

พื้นหลัง : rgb ( 140 , 166 , 253 ) ;

}

รายละเอียดของคุณสมบัติดังกล่าวข้างต้นมีดังนี้:

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

เอาต์พุต

เราได้พูดถึงวิธีการเขียนคำบรรยายใต้รูปภาพไปแล้ว

บทสรุป

ในการเขียนคำบรรยายใต้ภาพ ผู้ใช้สามารถใช้ปุ่ม “ <รูปพรรณ> ” องค์ประกอบหรือแบบธรรมดา “