Text centrat peste imagine

As vrea sa folosesc imaginea atasata, de trei ori (trei post-it-uri unul langa altul), peste care as vrea sa scriu un text (multirand, cu <br>), centrat vertical si orizontal pe poza.
Layout fluid (deci cu procente, nu cu px)!!!

Am incercat o multitudine de solutii de pe net (SO), dar nici una nu mi-a functionat. Eventualele modificari pe care le incercam, sa ma joc, pentru a obtine ceea ce vroiam, le facem cu Firebug-ul.

Ca idei, am incercat sa pun imaginea ca background dic-ului care contine textul (dar e prea mare imaginea si nu o pot scala).
Am incercat apoi sa fac un div care sa contina imaginea respective cu <img>, si apoi un alt div pentru text, introdus cu <span> sau cu <p>. Si aceste doua div-uri intr-un alt div parinte (parintele sa aibe position relative si celalalt absolult, cu margin 45%).

Imaginea este mai mare, si de aceea am zis sa o introduce intr-un div, separate, ca sa pot sa ii dau in css width (ca altfel, bacgroundul nu stiu sa il scalez).

Ah, ca fiind layout fluid, la redimensionare cu mouse-ul a ferestrei, poza se va scala, dar textul nu, este o alta poveste. Pentru ca am incercat si varianta de a transforma textul care sa fie afisat peste imaginea post-it in imagine, si apoi sa pun imagine peste imagine. Dar, din nou am probleme de pozitionare (centrare).

Ca test, am incercat sa fac un div cu background colorat (acelasi albastru ca post-it-ul), in care sa am textul centrat, si asa merge foarte bine, dar cand vreau sa inlocuiesc culoarea cu imagine (ca background scalat), sau sa pun <img>, lucrurile nu mai merg. Textul apara sub fiecare post-it.

Va rog, ma poate ajuta cineva?
Multumesc.


PS. As posta si codul, dar, dupa cum am spus, am incercat o multitudine de solutii); ideile incercat insa mi le-am expus mai sus.

 filaB.jpg   92.27K   7 downloads

@colombo2003, incearca sa pui pe https://jsfiddle.net/ codul incercat de tine...

 colombo2003, on 04 martie 2016 - 22:46, said:

Cam asa`i ce vrei ?

<style>
div{width:20%; display:inline-block; text-align:center; margin-left:-4px; position:relative;}
div span{position:absolute; left:0px; top:0px; width:100%; height:100%;}
div span:before{content:""; display:inline-block; height:100%; vertical-align:middle;}
div span strong{vertical-algin:middle; display:inline-block;}
div img{width:100%;}
</style>
<div>
<span><strong>Foaie verde<br />loboda</strong></span>
<img src="http://forum.softpedia.com/uploads/monthly_03_2016/post-349052-0-00354800-1457123932_thumb.png" />
</div>
<div>
<span><strong>Foaie verde<br />loboda</strong></span>
<img src="http://forum.softpedia.com/uploads/monthly_03_2016/post-349052-0-00354800-1457123932_thumb.png" />
</div>
<div>
<span><strong>Foaie verde<br />loboda</strong></span>
<img src="http://forum.softpedia.com/uploads/monthly_03_2016/post-349052-0-00354800-1457123932_thumb.png" />
</div>

Multumesc mult tuturor.
Cea mai convenabila solutie pentru mine (si adoptata) este cea a lui @rid.
  

PS. Se poate inchide!