如何在文本行中垂直对齐内嵌块？
如何在文本行中垂直对齐内嵌块？
提问于 2011-05-09 11:29:09
我想创建一个内联块，将采取一些未知的宽度和高度。(它将在其中包含一个动态生成内容的表)。此外，inline-block应该放在一行文本中，比如"my text (BLOCK HERE)“。为了让它看起来更漂亮，我试着让这个块在行垂直居中。因此，如果代码块看起来像这样：
TOP
MIDDLE
BOTTOM然后文本行将显示为："My text (My text )(中间)“(在行的上方和下方分别有顶部和底部)
这是我到目前为止所掌握的。
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-01 01:06:24
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>
在Safari5和IE6+中测试和工作。
Stack Overflow用户
发布于 2011-06-01 01:01:17
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5932201
复制相关文章
相似问题