John Doe John Doe - 5 months ago 12
HTML Question

Align text with a picture

I wish to align my text with my picture. The text cannot go outside the borders of the picture and should be placed under it. I have tried putting it in containers and divs but have not yet succeeded.

On the picture you will see the current situation (picture 1) and the wanted situation (picture 2).

enter image description here

Current code (after changing it a lot)

<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

Since you already have the width of the picture set the width to the <div> instead of the <img>.

You can center it back with margin:auto;:

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

See JSFiddle

Or center it by making it display:inline-block; and set text-align:center; to the parent element:

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

See JSFiddle