对齐图像和文字

Question

我有文字＆＃34; Helloooooooooooooooo＆＃34;在图像的底部，但图像应位于文本的中心。

预期产出：

            IMG
Hellooooooooooooooooooooooooooo

目前错误输出：

IMG
Helloooooooooooooooooooooooooooooo

我可以尝试什么？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

text-align: center将img居中。将其添加到父级，如果您希望屏幕左侧的父级包含文本的最大宽度或display: inline-block，请添加img。如果您希望父级占据容器的整个宽度并且文本/ img相对于该宽度居中，则将其删除。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将img设置为display: block，然后设置margin: auto。

img { display: block; margin: auto; }