Question

Let’s say I have an Image.

<img src="lala.png" />

This image has a width=400px;.

and I want to type “Lala” under this Image.

<img src="lala.png" />
<br>
<span>Lala</span>

Note that I’m gonna be fetching those images and those texts from a database, the width of the images is fixed at 400px, but of course the texts will vary in size, so I can’t use margin-left:100px; to push the text to the middle because It will look wrong on other texts…

What is the best way to do it?

Answer 1

you can do this by text-align:center;

<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>