☰

テキスト行内のインラインブロックを垂直方向に揃えるにはどうすればいいですか? 質問する

tag-icon • tag-icon html vertical-alignment css
テキスト行内のインラインブロックを垂直方向に揃えるにはどうすればいいですか? 質問する

幅と高さが不明なインライン ブロックを作成したいと思います。(その中には動的に生成されるコンテンツを含むテーブルが含まれます)。さらに、インライン ブロックは「my text (BLOCK HERE)」などのテキスト行内に配置する必要があります。見栄えを良くするには、ブロックを行の垂直方向の中央に配置しようとしていますブロックが次のようになっている場合:

TOP
MIDDLE
BOTTOM

すると、テキスト行には「My text ( [MIDDLE] )」と表示されます (行の上下に TOP と BOTTOM があります)

今のところ私が持っているものは次のとおりです。

CS

.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>

例

ベストアンサー1

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>

Safari 5 および IE6+ でテスト済み、動作します。

おすすめ記事