Question

我试图将文本垂直对齐在工具提示中，但我不能。

我正在使用Jquery Tools 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不会被覆盖。

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

1 个答案: