對齊圖像和文字

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; }