8

jQueryプログレスバー内でテキストを垂直方向と水平方向に中央に配置しようとしています。私はそれを水平に中央に配置しましたが、垂直には中央に配置しませんでした。これが私が現時点で持っているものです

私のHTML：

<div id='progressbar'><div id='label'>My text</div></div>

私のCSS：

#progressbar {
    width: 80%;
    text-align: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

#label {
    float: left;
    width: 100%;
    height: 100%;
    position: absolute;
    vertical-align: middle;
}

私のJavaScript：

$("#progressbar").progressbar({
    value: 50
});
4

3 に答える 3

3

以下を追加して管理:

line-height: 200%;

結果: http://jsfiddle.net/GYW73/1/

私のHTML：

<div id='progressbar'><div id='label'>My text</div></div>

私のCSS：

#progressbar {
    width: 80%;
    text-align: center;
}

#label {
    width: 100%;
    float: left;
    line-height: 200%;
}

私のJavaScript：

$("#progressbar").progressbar({
    value: 50
});
于 2013-08-05T22:59:50.477 に答える
2

line-height垂直方向の中央に配置するには、 が必要です。

line-height: 35px;

フィドル

于 2013-08-05T22:32:24.910 に答える
1

ブロック レベルのvertical-align要素にスタイルを適用しても、期待どおりに動作することはめったにありません。

ここで示した使用法はうまく機能します...表のセルで。古い非推奨の HTMLvalignプロパティのように機能します。インライン要素の動作は異なり、古い非推奨のalignHTML プロパティのように機能します。

ボックス要素 (div など) に適用すると、ブラウザーは単純にそれを無視します (仕様を参照) 。

ブロック要素での垂直方向の配置のオプションは限られています。次のいずれかを実行できます。

1) line-height を使用して、垂直スペース全体を埋めます。ブラウザーは、テキストを行内で垂直方向に揃えます。これの長所は、追加のラッピング タグを必要としないことです。短所は、事前に定義された高さで作業する必要があることです。

2) 絶対配置を使用します。このアプローチの利点は正確さです。テキストを必要な場所に正確に配置できます。絶対配置も非常に直感的です。短所は、追加のラッピング タグが必要になることと、事前定義された高さで作業する必要があることです。

あなたが持っている唯一の節約の猶予は、パーセントを使用することです. line-heightで、または絶対位置と組み合わせてtop/として使用できます。bottomこれは同じコードのモックアップで、パーセントtopを使用して div を中央に押し下げています。

#label {
    width: 100%;
    top:2.5%;
    position:absolute;
}

jsFiddle: http://jsfiddle.net/bLdgN/5/

ドキュメンテーション

于 2013-08-05T23:17:40.690 に答える