画像とテキストの整列

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: centerimgを中心に説明します。親に追加し、画面の左側の親にテキストまたは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

あなたはmargin: autoを設定し、その後、display: blockにimgを設定することができます。

img { display: block; margin: auto; }