对齐工具提示中的垂直文本

Question

我试图垂直对齐工具提示内的文本，但我做不到。

我正在使用 Jquery 工具 http://flowplayer.org/tools/tooltip/index.html

Answer 1

根据您提供的链接，我发现工具提示使用以下 CSS。

<div class="tooltip" style="visibility: visible; position: absolute; left: 465px; display: block; opacity: 1; top: 253px; ">
   Tooltip Text
</div>

该博客有一篇关于垂直居中内容的精彩文章

http://blog.themeforest。 net/tutorials/vertical-centering-with-css/

基于此并假设您不必支持 IE7，那么我会考虑 display: table-cell 方法。您可以将其应用于您的工具提示类。不过，您必须先包装单元格内容。

div.tooltip {display:table;}
div.tooltip > span {display:table-cell; vertical-align:middle;}

//if you can't wrap content in span yourself then use jquery to do it
$('div.tooltip').wrap('<span />');

//the new html
<div class="tooltip" style="visibility: visible; position: absolute; left: 465px; display: block; opacity: 1; top: 253px; ">
   <span>Tooltip Text</span>
</div>

只是认为我们不知道 css 如何应用于这些工具提示。它们被分配了显示属性block。您可能需要确保插件代码对工具提示的更改不会删除您的 display:table 属性。因此，您实际上可能想要对内容进行双重包装，以确保您的 CSS 不会被覆盖。