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

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不会被覆盖。