CSS ข้อความบนรูปภาพ ข้อความอยู่กลางรูปภาพ

สอนเขียนภาษา CSS แสดงข้อความบนรูปภาพ ด้วยคำสั่ง position: absolute โดยตัวอย่างแสดงข้อความไว้บนรูปภาพตำแหน่งกึ่งกลาง ด้วยคำสั่ง text-align: center และกำหนดความกว้างด้วย width: 100% สามารถเขียนคำสั่งได้ดังนี้

ตัวอย่าง CSS ข้อความบนรูปภาพ ด้วย position: absolute

<style>
    #my_div {
        width: 600px;
        position: relative;
        overflow: hidden;
    }
    #my_div img {
        max-width: 100%;
    }
    #my_div p {
        position: absolute;
        color: red;
        font-size: 18px;
        top: 50%;
        text-align: center;
        font-weight: bold;    
        width: 100%;    
    }    
</style>

<div id="my_div">
  <img src="https://www.devdit.com/chmod/post/images/4818231.png">
  <p>CSS ข้อความบนรูปภาพ</p>
</div>

ผลลัพธ์

สร้าง #my_div สำหรับคลุมแท็กรูปภาพ (img) และแท็กข้อความ (p) เข้าไว้ด้วยกัน โดยแท็ก p ใช้คำสั่ง position: absolute พร้อมกับกำหนดขนาดความกว้างเท่ากับ 100% ด้วย width: 100% และให้ข้อความอยู่ตรงกลางรูปภาพด้วยคำสั่ง text-align: center ข้อความเขียนว่า “CSS ข้อความบนรูปภาพ”