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

Question

我想创建一个内联块,它将采用一些未知的宽度和高度.(它内部有一个表,动态生成内容).此外,内联块应放在一行文本中,例如"我的文本(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>

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

Answer 2

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>