web-dev-qa-db-ja.com

構文：CSS値に変数を使用

ボックスを別のボックス内の垂直方向の中央に維持しようとしています。これを行うことができるCSSがあることは知っていますが、より信頼性の高い（？）jqueryを使用したいです。

var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);

$(".Text").css({
    marginTop: 'vertAlign'
});

詳細がわからない出力は、使用可能な垂直スペースの半分（ピクセル単位）でなければなりません。

[〜＃〜] edit [〜＃〜]

もともと、テキストブロックはdivに含まれるスパンでした。 divには設定された高さ（この場合は140ピクセル）があり、テキストブロック（スパン）は、そこに含まれるテキストの量に基づいて可変の高さになります。ただし、このテキストブロックを編集可能にする必要があります。そこで、テキスト領域に変更しました。ただし、テキスト領域の寸法の動作は厄介で、静的な高さと幅を設定する必要がありました。このテキストブロックの高さは可変ではないため、マージンと上部の間隔を取得する親の高さに違いはありません。私は何をすべきか？

jquerycssmathvar
19
C_K

必要に応じて、複数のスタイルを実行する場合：

var styles = {'margin-top':vertAlign,'property':100,'property':somevalue}
$(".Text").css(styles);
9
robx
var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);
$(".Text").css({
        margin-top: vertAlign + 'px'
    });

単位を指定する必要があります。そうしないと、ピクセルかemかappleかをブラウザーが判断できなくなります。また、範囲チェックを行いたい場合は、vertAlignを負にしたくないでしょう。

2
Arjan