Выравнивать текст с изображением

Question

Я хочу выровнять свой текст с моей фотографией. Текст не может выйти за пределы изображения и должен быть помещен под него. Я попытался положить его в контейнеры и divs, но еще не удалось.

На картинке вы увидите текущую ситуацию (рисунок 1) и нужную ситуацию (рисунок 2).

Текущий код (после изменения его много)

<div style="text-align:center"> 
    <a href="testing"><img src="test.jpg" width="800px" height="150px"></a><br/> 
    <p align="left"> This a test. 
</p> 
    </div> 
    <br> 

Answer 1

Установите ширину в <div> вместо <img> и центра его с margin:auto;:

<div style="text-align:center;width:300px;margin:auto;"> 

См JSFiddle

Вы также можете сделать DIV display:inline-block; и установить text-align:center; на содержащий элемент:

<div style="text-align:center;"> 
    <div style="text-align:center;width:300px;display:inline-block;"> 

См. JSFiddle

Answer 2

Try This

HTML

<div class="img_cont"> 
    <a href="testing" class="img_link"><img src="test.jpg" class="the_img"></a><br/> 
    <p class="text"> This a test. 
</p> 
</div> 

CSS

.img_cont{ 
    width:200px; //or any other width 
    height:auto; 
} 
.testing{ 
    text-decoraion:none; 
    border:none; 
} 
.the_img{ 
    width:100%; //make the image fill the container to the full 
    height:auto; // in order to maintain the aspect ratio of the image 
} 
.text{ 
    // your text styles go here 
}