javascript - JQuery:ホバー時にテキストをズーム

Question

アニメーションでテキストをズーム/ズーム解除したい。問題は、テキストが相対 div 内に絶対に配置され、フォントサイズをアニメーション化すると、テキストが右と下にのみ拡張されることです。左右均等に伸縮させたい。

準備例： http: //jsbin.com/welcome/48103/edit

Answer 1

CSStransitionプロパティを使用してアニメーション化します。

.zoom {
  display: inline-block; /* this is needed for inline elements */
  transition: transform 0.3s ease-in-out;
}

.zoom:hover {
  transform: scale(1.4);
}

<a class="zoom" href='#'>Hover me!</a>

Answer 2

水平中央揃えは簡単です。追加するだけで機能text-align: centerします。ただし、中央に揃えたい場合は、を使用する必要がありますdisplay: table。これは、「のみ」 td が set に「許可」されているためですvertical-align: middle。そのため、div テーブル レイアウトを構築する必要があります: http://jsbin.com/welcome/48145/edit