1

ユーザーがアップロードした画像プレビューを自分のサイトに表示していますが、div内で垂直方向に中央に配置できるようにしたいと考えています。margin-topアップロードが完了したら、Javascriptを使用して画像を次のように設定することでこれを試みました（$img問題の画像はどこにありますか）。

reader.onloadend = (function() {
    var $parentDiv = $img.parent();
    $img.css('margin-top', ($parentDiv.height() - $img.height()) / 2);
});

私が読んだFileReaderのドキュメントonloadendは、ファイルのアップロードが完了すると呼び出されると私に信じさせます。それは事実のようです。ただし、画像のサイズに関係なく、と呼ばれる時点$img.height()で戻ってきます。0onloadend

これは、値がまだ利用できないという事実によるものと思われます。2番目の画像をアップロードして（既存の画像プレビューをクリアして）、最初の画像を再アップロードすると、関数は機能します。$img.height()正しい値を返します。後でコンソールから呼び出すと、正しく戻ります。

これを処理するための受け入れられた方法はありますか？.height()の値がゼロより大きくなるまで間隔を置いて呼び出す以外に、の値がいつ使用可能になるかを知る方法はありますか？ありがとう！

4

1 に答える 1

2

高さゼロの問題は、Michał Czernow の「ゴースト要素」CSS の垂直方向のセンタリング手法 ( CSS トリック: 未知のセンタリング) のバリエーションを使用して回避できるはずです。これには、画像の JavaScript 操作は必要ありません。

CSS を使用して、コンテナ div に疑似要素を追加します。

.container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

その「ゴースト」要素は基本的に画像の足場になり、画像のスタイルを設定し、画像vertical-align: middle;を更新するたびに機能するはずです。

これがどのように機能するかを示すjsfiddleを次に示します。

于 2012-06-26T16:05:33.987 に答える