爲什麼我不能垂直對齊我的p標籤？

Question

var window_height = window.screen.height; 
 
var p_height = document.getElementsByTagName("p")[0].clientHeight; 
 
document.getElementsByTagName("p")[0].style.marginTop = (window_height/2) - p_height/2 + "px";

body { 
 
    background-color: #F0F0F0; 
 
    font-size: 83%; 
 
} 
 

 
#main { 
 
    width:100%; 
 
    text-align: center; 
 
} 
 

 
#main p { 
 
    display: block; 
 
    border: 1px red solid; 
 
    margin:0 auto; 
 
}

<div id="main"> 
 
    <p>This is my text.</p> 
 
</div>

我要的是垂直動態調整我的p標籤。

所以我使用JavaScript來讓我window和<p>標籤高度的高度然後將我的標籤margin-top到(window_height/2) - p_height/2 + "px";

但是，似乎不工作性質。 任何人都可以提供幫助嗎？

Answer 1

window.screen.height會給你用戶屏幕的高度，而你需要瀏覽器視口的高度。

var verticalAlignPTag = function() { 
 
    var window_height = window.innerHeight; 
 
    var p_height = document.getElementsByTagName("p")[0].clientHeight; 
 
    document.getElementsByTagName("p")[0].style.marginTop = (window_height/2) - p_height/2 + "px"; 
 
}; 
 
verticalAlignPTag(); 
 

 
//Optionally, add the same code to run when the window resizes. 
 
window.onresize = verticalAlignPTag;

body { 
 
    background-color: #F0F0F0; 
 
    font-size: 83%; 
 
} 
 

 
#main { 
 
    width:100%; 
 
    text-align: center; 
 
} 
 

 
#main p { 
 
    display: block; 
 
    border: 1px red solid; 
 
    margin:0 auto; 
 
}

<div id="main"> 
 
    <p>This is my text.</p> 
 
</div>

您也可以選擇在window.onresize事件上運行相同的代碼，這樣，如果用戶改變瀏覽器的高度你<p>將作相應調整。

我把代碼對齊<p>標記到一個函數，以便人們可以很容易地綁定它到window.onresize事件。