文章中に画像を挿入したとき、何も指定しなければ「テキストのベースライン」と「画像の下端」が揃うように表示されます。これだと、文字の高さよりも画像の高さが大きい場合に、画像が行から大きく上に飛び出て表示されてしまいます。
例えば、以下の例では文章中に「検索」というボタンっぽい画像を挿入していますが、これは行内から上へ大きく飛び出しているように見えます。

上記は、「検索ボタン」画像の下端が、「テキストのベースライン」と揃うように表示されていると思います。（※ベースラインというのは、アルファベットの「abcdef」などの文字の下端のこと。「gjpq」などはベースラインから下に出ている文字。）

まあ、好みの問題かも知れませんが、個人的には上にだけ大きく飛び出すよりも、上下方向に同じように飛び出して欲しいのですよね……。つまり、（上下方向での）「画像の中心」と「テキストの中心」が一致するように表示して欲しい……と。
例えば、以下の例だと私の望みのように表示されます。

この場合、「画像の中心」と「テキストの中心（※正確にはアルファベットの小文字の『x』の中心）」が一致するよう配置されます。「日本語テキストの中心」と揃うわけではないのですが、上方向にのみ大きく飛び出す配置よりは良いと思います。
まあ、この辺は好みの問題だったり、挿入する画像次第な面もあるでしょうけども。

上記のように、画像の中心とテキストの中心を揃えるデザインは、スタイルシートを使うことで簡単に指定できます。

画像の中心とテキストの中心を揃える(合わせる)方法

先程の例のような「画像とテキストの中心を揃えて表示する」デザインを実現するには、img要素に対してvertical-alignプロパティを使います。使い方は簡単で、以下のようにCSSソースを記述するだけです。

img.sample {
   vertical-align: middle;
}

このときのHTMLソースは例えば以下のような感じで記述しておきます。

<p>
   ボタン「<img src="search.gif" alt="検索" class="sample" />」をクリック
</p>

これで、画像の配置が「テキストの中心」（正確には「x」の中心）になります。

このvertical-alignプロパティは、(行内に配置される)画像そのものに対して指定しなければならない点に注意して下さい。text-alignプロパティのように(テキストを包含している)ブロックに対して指定しても意味がありません。

画像の中央を行内のどの辺に配置するか、微調整することもできる

なお、vertical-alignプロパティには、値に数値を指定することもできます。その場合は、「ベースラインに揃えた場合」を「0」として、そのからの移動距離をピクセル単位で指定できます。正の数だと上方向に移動、負の数だと下方向に移動です。

例えば、以下のように書くと、ベースラインに揃えた位置から12ピクセルほど下へ移動できます。

img.sample {
   vertical-align: -12px;
}

このスタイルシートで冒頭のサンプルを表示させると、以下のように見えます。

私の今の閲覧環境に限定すれば、「-12px」を指定するとちょうどよく（日本語テキストの）中心に画像が表示されてくれます。
しかし、この方法だと文字サイズを変更したときには、中心には表示されなくなりますから、どんな場合にも共通のスタイルシートとして書いておきたい場合には、ピクセルでは調整しないでおく方が良い気がします。
閲覧環境は閲覧者によって様々ですから、数値を使って微調整してもあまり意味はないかも知れません。場合によっては、余計におかしく見えるかもしれませんし。

というわけで、画像を(だいたい)行の上下方向の中心に表示させたいのであれば、vertical-alignプロパティの値には「middle」を指定しておくのが無難でしょう。

(更新日：2016年02月08日)