1

多くのブラウザー、モバイル、デスクトップ用のサイトを開発しているときに、次の CSS が読み込み div を中央に配置するのにうまく機能することに気付きました。

img.loading1 {
    position:absolute;
    left:50%;
    margin-left:-16px;
    top:50%;
    margin-top:-16px;
    z-index:10
}
.loading2 {
    color:#006BB2;
    position:absolute;
    left:50%;
    margin-left:0px;
    top:40%;
    z-index:5
}
.loading3 {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color:lightgrey;
    opacity:0.85
}

<div id="container" style="position:relative">
    ...content ommitted...
    <div id="loading" style="display:none">
        <div class="loading3"></div>
        <img class="loading1" src="images/loader-ajax.gif" width="32" height="32">
        <span class="loading2" id="getting">Getting your request...</span>
    </div>
    ...content ommitted...

div の表示が「ブロック」に設定され、3 つのアイテムが中央に配置されます。

ただし、モバイル画面では、水平位置が正しくても、「含む」div の高さによっては垂直位置が画面外になる可能性があります。

画面の中心を見つけて画像を配置し、そこに Javascript でスパンすることは可能ですか?

編集 1:これを機能させるには、読み込み中の div の高さを画面の高さに設定する必要がありますか?

4

3 に答える 3

1

関連情報:

絶対配置要素はすべて、コンテナーに対して相対的に配置されます。デフォルトのコンテナは body タグです。

寸法が指定されていない場合、絶対位置を持つ要素はそのコンテンツのサイズにシュリンクラップされます。JavaScript でサイズを計算すると、含まれるコンテンツに基づいて、現在のサイズが何であれ、返される値が変わります。要素は、幅または高さが明示的に 100% に設定されていない限り、親と同じサイズにはなりません。

jQueryを使用しない場合:

コンテナー要素の x と y の位置 (ビューポートを基準とする)、ビューポートの幅と高さ、および要素の幅と高さを取得します。

topビューポートの高さの半分からコンテナーの y 位置を引いて要素の高さの半分を引いた値に設定します。leftをビューポート幅の半分からコンテナーの x 位置を引いて要素幅の半分を引いた値に設定します。

// Center an absolutely-positioned element in the viewport.
function centerElementInViewport(el, container) {

    // Default parameters
    if ((typeof container == 'undefined') || (container === null))
        // By default, use the body tag as the relative container.
        container = document.body;

    // Get the container position relative to the viewport.
    var pos = container.getBoundingClientRect();

    // Center the element
    var left = ((window.innerWidth >> 1) - pos.left) - (el.offsetWidth >> 1);
    var top = ((window.innerHeight >> 1) - pos.top) - (el.offsetHeight >> 1);
    el.style.left = left + 'px';
    el.style.top = top + 'px';
}

これがjsfiddle demoです。jsfiddle での実行に問題がある場合は、このスタンドアロン デモを試してください。

IE7/8/9、Firefox、Chrome、Safari、Safari Mobile (iOS) でテストしました。これまでのところ、問題を引き起こすことがわかっている唯一のことは、絶対配置要素にマージンがある場合です (この関数は現在サポートしていません)。

レスポンシブ デザインでのテストはまだ行っていません。

注:ページが最初に読み込まれるときにこの関数を呼び出さないように注意してください。ブラウザがスクロールまたはズームされてから再ロードされた場合、ページは再スクロールまたはズームされていない可能性があり、結果の位置は正しくありません。関数を呼び出す前に 100 ミリ秒のタイマーを設定すると、機能しているように見えました (ブラウザーがページを再スクロールして再ズームする時間を許可します)。

于 2012-07-06T17:46:05.903 に答える
0

私の経験では、これはhtml/cssで行うのは難しいです

私が見つけた最も簡単な方法は、Javascripts innerHeight プロパティを使用することです

コードは次のようになります。

if (window.innerHeight) {
  var loadingHeight = document.getElementById('loading').offsetHeight;
  document.getElementById('loading').style.top = (((window.innerHeight/2)-loadingHeight) + "px");
}

同じメソッドを使用して水平位置を設定できますが、height、offsetHeight、および window.innerHeight メソッドをそれぞれの幅オプションに置き換えます。これらはすべて Web で十分に文書化されています。

于 2012-07-06T15:25:00.950 に答える
0

position: fixedfix width&で使用しますheight。

于 2012-07-06T15:42:51.760 に答える