[解決済み] テキスト行のインラインブロックを垂直方向に揃えるには？

質問

私はいくつかの未知の幅と高さを取ることになるインラインブロックを作成したいと思います。(それは動的に生成されたコンテンツを持つその中のテーブルを持つでしょう）。 さらに、inline-blockは、"my text (BLOCK HERE)"のようなテキストの行の中に配置される必要があります。 見た目をきれいにするために の行の中でブロックが垂直方向に中央化されるようにしようとしています。 . なので、ブロックがこんな感じだと

TOP
MIDDLE
BOTTOM

すると、テキストの行は、"私のテキスト ( [MIDDLE] )"（行の上下にTOPとBOTTOMがある）と表示されるようになります。

今のところ、こんな感じです。

CSS

.example {
  background-color: #0A0;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  position: relative;
  text-align: center;
}

HTML

<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

<イグ

どのように解決するのですか？

code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
}

<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

Safari5とIE6+で動作確認済みです。