对齐图像和文字

Question

我在图像的底部有文字“Helloooooooooooooooo”，但图像应该位于文字的中心。

预期输出：

  IMG 
Hellooooooooooooooooooooooooooo 

目前错误的输出：

IMG 
Helloooooooooooooooooooooooooooooo 

我能试试吗？

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

Answer 1

text-align: center

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

<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

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

img { display: block; margin: auto; }