Afectare Imagine (Punere Text)

Nu prea stiu cum sa fac asezarile in pagina.
Am urmatorul box: https://i.imgur.com/d0bbXen.png
Vreau ca dupa imaginea (baiatul negru) sa pun o linie verticala si dupa sa mai adaug acolo cateva detalii si totul sa fie pe centru. Dar daca adaug si scriu mai mult imaginea cu cainele se duce spre dreapta si iese din box, as vrea sa fac asta fara sa afecteze imaginile.
Ar trebui sa arate asa in final: https://i.imgur.com/G3ejze8.png
Centrul liniei verticale sa fie egal de sus in jos si textul sa fie pe centrul boxului negru.
Cam asa arata codul:

<div class="box" style="position:relative;top:-15px;background:#0f0f0f;" id="media">

  <p class="normal" style="float:left;padding:2px;color:white;">
    <font style="font-size:12px;">TEST</br>
    <img class="zoom" src="images/Skin_217.png" style="height:260px;"/></br><i class="fa fa-certificate" style="color:red;"></i> TEST</br><i class="fa fa-clock-o"></i> 2019-09-24</br><a href="https://rpg.linkmania.ro/user/profile/Spoker/" style="color:#1AB0EB;" target="_blank"><i class="fa fa-external-link"></i> Panel Profile</a></font>
    
  </p>
  <img src="images/car4.png" style="height:350px;position:relative;left:400px;">
</div>

Nu prea stiu sa fac asezarile in pagina, am tot cautat pana sa intreb aici pentru ca imi place sa invat singur usor, usor.

Iti sugerez sa pui imaginea ‘car4’ ca background-image, nu img.

By default, tag-ul img este inline-block. Asta inseamna ca daca ai continut, acesta o sa impinga imaginea (si invers).

Daca este background-image, aceasta o sa stea in permanenta in spatele tuturor elementelor.

2 Likes