ｈｔｍｌ　画像とテキストの配置

htmlにて画像の右側の中央部に文字を配置したいのですが、
うまくいきません。
あるサイトを参考にして以下のようにしたのですが、

<body>

<p>
    <img src="bear.png" alt="写真" align="middle">
    右側の中央にテキストを表示します。
</p>

</body> 画像の通り画像の右　下部分に配置されてしまいますどこが悪いのでしょうか？お願い致します。 ※添付の画像はスマホで撮ったので粗くてすみません

行動規範の内容に同意します

回答1件

ベストアンサー

Chromeでは提示されたコードで中央に表示されましたが、10年以上前から非推奨の書き方です。雑多なサイトを参考に勉強するのではなく、最新の参考書を本屋で探すことをお勧めします。
※ 少なくともCSS の Flexbox と Grid を取り扱った参考書で無いと古いです。

CSS
1img {
2    vertical-align: middle; /* CSSで指定する場合の例 */
3}

HTML
1<p>
2<img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=bear.png" alt="写真">
3右側の中央にテキストを表示します。
4</p> 
5```**動くサンプル：**[https://jsfiddle.net/u9kp56vz/](https://jsfiddle.net/u9kp56vz/)
6
7---
8
9【<img>: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN】
10[https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Deprecated_attributes](https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Deprecated_attributes)
11> 非推奨の属性
12align
13    周囲の文脈に対する画像の配置を指定します。もう使用するべきではありません。