Allign image and text

Question

I have text "Helloooooooooooooooo" at the bottom of the image but the image should be in the center of text.

Expected output:

            IMG
Hellooooooooooooooooooooooooooo

Currently wrong output:

IMG
Helloooooooooooooooooooooooooooooo

What can I try?

<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60"><br>
  <span style="">Hellooooooooooooooooooooooooooooooooooooooooooooo.</span>
</div>

Answer 1

text-align: center will center an img. Add that to the parent, and add display: inline-block if you want the parent on the left side of the screen contained to the max width of either the text or the img. Or remove it if you want the parent to occupy the full width of the container and the text/img centered relative to that width.

<div style="text-align: center; display: inline-block;">
  <img style="vertical-align:middle" src="https://placehold.it/60x60"><br>
  <span style="">Hellooooooooooooooooooooooooooooooooooooooooooooo.</span>
</div>

Answer 2

You can set the img to display: block, then set margin: auto.

img { display: block; margin: auto; }