title: How to center a text under an image regardless of the size of that text
body: <p>Let's say I have an Image.</p>
  
  <pre><code>&lt;img src="lala.png" /&gt;
  </code></pre>
  
  <p>This image has a <code>width=400px;</code>.</p>
  
  <p>and I want to type "Lala" under this Image.</p>
  
  <pre><code>&lt;img src="lala.png" /&gt;
  &lt;br&gt;
  &lt;span&gt;Lala&lt;/span&gt;
  </code></pre>
  
  <p>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 <code>margin-left:100px;</code> to push the text to the middle because It will look wrong on other texts...</p>
  
  <p>What is the best way to do it?</p>