Hoe OM - Posisioneer teks oor 'n prent
Leer hoe om teks oor 'n prent te plaas.
Beeld teks
Links onder
Links bo
Regs bo
Onder regs
Gesentreer
Hoe om teks in beeld te plaas
Stap 1) Voeg HTML by:
Voorbeeld
<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>
Stap 2) Voeg CSS by:
Voorbeeld
/* 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%);
}
Om meer te wete te kom oor hoe om prente te stileer, lees ons CSS Images - tutoriaal.
Om meer te wete te kom oor CSS-posisionering, lees ons CSS Posisie - tutoriaal.