如何在一行文本中垂直对齐一个行内块？ [英] How to vertical align an inline-block in a line of text?

问题描述

我想创建一个内联块，将采取一些未知的宽度和高度。 （它内部有一个表，动态生成内容）。此外，内联块应放置在一行文本内，例如my text（BLOCK HERE）。为了使它看起来漂亮，我想让块垂直居中在行。所以如果块如下所示：

I want to create an inline-block that will take on some unknown width and height. (It'll have a table inside it with content dynamically generated). Further, the inline-block should be placed inside a line of text, such as "my text (BLOCK HERE)". To make it look pretty, I'm trying to make the block be vertically centered in the line. So if the block looks like this:

TOP
MIDDLE
BOTTOM

然后，文本行将显示为My text（[MIDDLE]）（TOP和BOTTOM在行的上方和下方）

Then the line of text will read: "My text ( [MIDDLE] )" (with TOP and BOTTOM above and below the line)

以下是我迄今为止的情况。

Here's what I have so far.

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

HTML

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>

5和IE6 +。

这篇关于如何在一行文本中垂直对齐一个行内块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！