如何垂直对齐一行文本中的内联块？答案

【问题标题】：How to vertical align an inline-block in a line of text?如何垂直对齐一行文本中的内联块？
【发布时间】：2011-08-21 09:23:53
【问题描述】：

我想创建一个具有未知宽度和高度的内联块。（它里面会有一个表格，内容是动态生成的）。此外，内联块应放置在一行文本内，例如“我的文本（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>

【问题讨论】：

也许可以画出来并张贴您想要的图片。也许是我，但我不知道你在问什么。

标签： html vertical-alignment css

【解决方案1】：

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

&lt;p&gt;Some text &lt;code&gt;A&lt;br /&gt;B&lt;br /&gt;C&lt;br /&gt;D&lt;/code&gt; continues afterward.&lt;/p&gt;

在 Safari 5 和 IE6+ 中测试并运行。

【讨论】：

我在类似问题上使用了您的解决方案，但我试图将 CSS 三角形居中。但是，它并不完全集中。我可以在您的食谱中添加什么以使其完全居中？
@Imray 位置：相对？

【解决方案2】：

display: inline-block 是您的朋友，您只需要将结构的所有三个部分 - 之前、“块”、之后 - 合二为一，然后您可以将它们全部垂直对齐到中间：

Working Example

（它看起来像你的照片；））

CSS：

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

HTML：

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>

【讨论】：