如何在一行文本中垂直对齐一个内联块？

136

我想创建一个内联块，它将具有一些未知的宽度和高度。（其中将有一个表，其中动态生成了内容）。此外，行内块应放置在一行文本中，例如“我的文本（在此处块）”。为了使它看起来更漂亮，我试图使该块垂直于该行居中。因此，如果该块看起来像这样：

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

— 杰夫
source

5

也许将其绘制出来并张贴您想要的图像。也许是我，但我不知道您在问什么。

— 布伦特·弗雷拉尔

168

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 +中使用。

— 迈达斯
source

我在类似的问题上使用了您的解决方案，但是我试图将CSS Triangle居中。但是，它并不完全居中。我可以在您的食谱中添加什么以使其完全居中？

— CodyBugstein 2014年

@ Imray位置：相对？

— NinoŠkopac15年

23

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

工作实例

（无论如何看起来还是您的图片；））

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>

— clairesuzy
source