0

CSS と jQuery を使用して、絶対配置オブジェクトを水平方向に中央揃えにしようとしています。オブジェクトの幅が異なるため、jQuery が必要です。jsFiddle のアイコンにカーソルを合わせて、意味を確認してください。

ここでjsFiddle

現在、プロパティが適用されていますが、オブジェクトの幅の半分でleft: 50%あるネガを行う必要があります。margin-leftこれは私のコードですが、なぜ機能しないのかわかりません:

jQuery

$('.tooltip').each(function() {
      $(this).css('margin-left', '-'+($(this).width() / 2)+'px');
}​

CSS

.toolbar .tooltip {
    position: absolute;
    left: 50%;
    margin-top: 8px;
    padding: 3px 8px;
    display: none;
}

.toolbar li:hover .tooltip {
    display: block;
}

HTML

<ul class="toolbar">
    <li><img alt="Undo" src="undo.gif" /><span class="tooltip">Undo</span></li>
    <li><img alt="Redo" src="redo.gif" /><span class="tooltip">Redo</span></li>
    <li><img alt="Help" src="help.gif" /><span class="tooltip">Help</span></li>
    <li><img alt="Feedback" src="feedback.gif" /><span class="tooltip">Feedback</span</li>
</ul>
4

2 に答える 2

4

クローズされていないコードの間違い、更新されたコードはこちら

ちなみに、パディングがあるので、「幅」の代わりに「outerWidth」を使用する必要があります。ここでコードを修正できます

于 2012-04-28T20:56:37.227 に答える
1

ブロックの幅に基づいて、leftそれに応じて設定します。

$('.tooltip').each(function() {
    // Assuming button block width is 32px.
    $(this).css('left', (32 - ($(this).width())) / 2+'px');
}​);​

http://jsfiddle.net/3Cb9A/3/

于 2012-04-28T21:02:15.393 に答える