1

これは、他の「autofit」関連の質問とは異なる質問だと思います。

常に画面幅の半分 (サイズ変更中およびサイズ変更後などに動的に) になるように自動調整し、ページの垂直方向および水平方向の中央に配置する単一行のテキスト ラベルがあります。jQuery FitText プラグインを試してみましたが、垂直方向のセンタリング (フォント サイズに応じて上下に移動し、ビューポートの下に移動する場合もあります) ではうまく機能しないようです。

絶対配置を使用していることが原因である可能性がありますが、これを達成する別の方法が見つかりません。

私のCSS：

h1 {
  position: absolute;
  top: 25%;
  right: 25%;
  left: 25%;
  bottom: 25%;
  display: table-cell;
  vertical-align: middle;
}

この JSFiddle は、埋めたいブロックを示しています: http://jsfiddle.net/KFySS/6/

編集：上記のフィドルに偽の背景画像テキストを追加しました。これは、実際のサイズの動作に非常に近い動作をします。

破線で囲まれたブロックを短いテキストで埋める必要があります。また、垂直方向および/または水平方向の中央に配置する必要があります。このバウンディング ボックスは説明のためのものですが、Fittext プラグインを使用する際の出発点でした。

4

2 に答える 2

1

現在のビューポートを基準にしてフォントのサイズを変更する、新しいCSS3 vw、vh、および vmin font sizing unitsを使用するソリューションを見つけました。 

<div>
  <h1>Hi!</h1>
</div>

div {
  text-align: center;
}
h1 {
  font-size: 50vmin;
  position: absolute;
  top: 50%;
  margin-top: -25vmin;
  width: 100%;
}

以下は、新しい Webkit ブラウザーの例です。

http://jsfiddle.net/uTykf/

私が使用した垂直センタリングのアプローチは少し醜いように見えますが、私ができる最善の方法です。より良いアプローチがあるかどうかを聞いてうれしいです。

于 2013-01-09T16:57:25.513 に答える
0

これがあなたの望むものだと思います。

h1 {
  padding: 10%;
  text-align: center;
  border: 4px dashed red;
  margin: 25%;
}

以下のリンクをチェックしてください。

http://jsfiddle.net/GLEcd/2/

于 2013-01-07T10:31:46.837 に答える