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

我想创建一个内联块，将采取一些未知的宽度和高度。(它将在其中包含一个动态生成内容的表)。此外，inline-BLOCK 应该放在一行文本中，比如“ my text (BLOCK HERE)”。为了让它看起来漂亮，我试着让这个块在直线上垂直居中。因此，如果块看起来像这样:

TOP
MIDDLE
BOTTOM

然后文本行将读作: “ My text ([ MIDDLE ])”(顶部和底部位于行的上方和下方)

这是我目前掌握的情况。

CSS

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

超文本标示语言

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

Example

187099 次浏览
小开

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>
小开
最佳答案 

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>

Tested and works in Safari 5 and IE6+.


提交答案