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

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

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

この場合、「画像の中心」と「アルファベットの小文字の『x』の中心」が一致するよう配置されます。なので、「日本語テキストの中心」と揃うわけではないのですが、上方向にのみ大きく飛び出す配置よりは良いと思います。個人的には。
まあ、好みの問題かも知れませんけども。

で、これを実現するには、vertical-alignプロパティを使います。使い方は簡単で、img要素に対して以下のように記述するだけです。

img.sample {
   vertical-align: middle;
}

HTMLは以下のような感じで。

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

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

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

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

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

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

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

というわけで、「middle」を指定しておくのがよいと思います。