div的垂直居中僅在JS直接在下面鏈接時才有效 <body> 和正上方 </body> ？

Question

我目前正在使用引導程序，希望一些文本在垂直和水平方向上居中。 我寫了一些Javascript，將文本容器的CSS設置為絕對位置，然后從頂部和左側計算像素，以使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>

aligned, but not correctly horizontally aligned. 出於某種原因，當我加載頁面時，文本正確地對齊，但沒有正確地水平對齊。 僅當我稍微改變瀏覽器窗口的大小時，文本才會到達正確的位置（水平和垂直方向）。

我也很困惑，因為我當前在結束body標簽之前直接具有指向Javascript的鏈接，但是當我在開始body標簽之下直接向同一個JS文件添加第二個鏈接時，文本在第一次嘗試時就可以正確對齊。

有人知道發生了什么嗎？ 如何獲得它，以便在第一次加載頁面時在水平和垂直方向正確對齊？

Answer 1

為什么不使用純CSS解決方案，那樣就不必綁定到resize()函數，請參見：

 #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>

Answer 2

在jquery或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可以輕松做到這一點，最簡單的方法是使用我相信的flex，但這不是問題:)

div的垂直居中僅在JS直接在下面鏈接時才有效 <body> 和正上方 </body> ？

問題描述

2 個解決方案

解決方案1
0 2017-01-16 23:45:49

解決方案2
0 2017-01-17 01:12:12

div的垂直居中僅在JS直接在下面鏈接時才有效 <body> 和正上方 </body> ？

問題描述

2 個解決方案

解決方案1 0 2017-01-16 23:45:49

解決方案2 0 2017-01-17 01:12:12

解決方案1
0 2017-01-16 23:45:49

解決方案2
0 2017-01-17 01:12:12