为什么我不能垂直对齐我的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事件。