JSが直接<body>の下に直接連結され、直接的に</body>の上にある場合にのみ、divの垂直方向のセンタリングが機能しますか？

私は現在、ブートストラップを使用しており、テキストを縦と横の両方にセンタリングする必要があります。私は絶対位置にテキストコンテナのCSSを設定し、いくつかのJavascriptを書いた後、上からのピクセルを計算し、正確にセンタリングされるようにdivのために残さ：JSが直接<body>の下に直接連結され、直接的に</body>の上にある場合にのみ、divの垂直方向のセンタリングが機能しますか？

$(document).ready(function() { 
    $(window).resize(); 
}); 

$(window).resize(function() { 
    $('#text-container-container').css({ 
     height:($(window).height()), 
    }); 
    $('#text-container').css({ 
     position: 'absolute', 
     left: ($(window).width() - $('#text-container').outerWidth())/2, 
     top: ($(window).height() - $('#text-container').outerHeight())/2, 
    }); 
});

HTML：

<div class="outer-container" id="text-container-container"> 
    <div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <!--navigation stuff here--> 
    </nav> 
    <div id="text-container"> 
     <h1>text</h1> 
    </div> 
    </div> 
</div>

何らかの理由で、ページをロードすると、テキストが正しくに整列されますが、正しく水平に整列されません。ブラウザウィンドウのサイズを変更した場合にのみ、テキストが正しい位置（水平と垂直の両方）に表示されます。

私は現在、閉じているbodyタグの直前にJavascriptへのリンクを持っているので混乱していますが、bodyタグの直下にある同じJSファイルに2番目のリンクを追加すると、最初の試み。

何が起こっているのか知っていますか？ページが最初に読み込まれたときに、水平方向と垂直方向の両方に正しく配置されるようにするにはどうすればよいですか？

出典

2017-01-16 gridproquo

は、あなたが同様にあなたのHTMLコードを表示してくださいすることができませんでしたか？ – ZombieChowder

@ ZombieChowder更新しました。 – gridproquo

$（document）.ready - DOMの準備は、$（ウィンドウ）.on（ "ロード" ...と同じではありません...：https：//learn.jquery.com/using-jquery-core/document-ready/あなたがいくつかのイメージや重量のあるコンテンツを持っているなら、計算のために、ページが完全にロードされるまで待たなければならない...だから、$（window）.on （ "load"、function（）{$（window）.resize（）;}） – sinisake

なぜあなたはそのようresize()機能にバインドする必要はありませんが、これを参照してください、代わりに純粋CSSソリューションを適用しない：jqueryので

#text-container-container, #text-container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 

 
#main-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) 
 
}

<div class="outer-container" id="text-container-container"> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <!--navigation stuff here--> 
 
    </nav> 
 
    <div id="text-container"> 
 
     <h1 id="main-text">text</h1> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-01-16 23:45:49

何らかの理由で、同じことが起こります。 – gridproquo

スクリプトが不要になったら削除し、 'ctrl + f5'を押して、ifそれは変わらない。 –

正確には私がやったことは、残念なことに同じ結果を出します）： – gridproquo

またはJavaScriptあなたが作成する必要がありますが関数を呼び出し、準備中とサイズ変更時に呼び出す：

$(document).ready(function() { 
 
    center(); 
 
}); 
 
$(window).resize(function() { 
 
    center(); 
 
}); 
 
var center = function() { 
 
    $('#text-container').css({ 
 
    position : 'absolute', 
 
    left : (($(window).width() - $('#text-container').outerWidth())/2), 
 
    top : (($(window).height() - $('#text-container').outerHeight())/2) 
 
    }); 
 
};

/* see me */ 
 
#text-container { 
 
    border: solid; 
 
    position:absolute;/* <=== needs to be set in CSS too */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer-container" id="text-container-container"> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     navigation 
 
    </nav> 
 
    <div id="text-container"> 
 
     <h1>text</h1> 
 
    </div> 
 
    </div> 
 
</div>

CSSはそれを行う簡単にでき、最も簡単には私は信じているフレックスを使用することですが、それは質問:)

出典

2017-01-17 01:12:12

JSが直接<body>の下に直接連結され、直接的に</body>の上にある場合にのみ、divの垂直方向のセンタリングが機能しますか？

答えて

関連する問題