कैसे करें - टेक्स्ट को इमेज के ऊपर रखें
टेक्स्ट को इमेज के ऊपर रखने का तरीका जानें।
छवि पाठ
नीचे बाएँ
बाएं से बाएं
दायां शीर्ष
नीचे दाएं
केंद्रित
इमेज में टेक्स्ट कैसे रखें
चरण 1) HTML जोड़ें:
उदाहरण
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top
Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom
left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position:
absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text
*/
.centered {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
इमेज को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए, हमारे CSS इमेज ट्यूटोरियल को पढ़ें।
CSS पोजिशनिंग के बारे में अधिक जानने के लिए, हमारा CSS पोजिशन ट्यूटोरियल पढ़ें।