javascript - 为什么我不能垂直对齐我的 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将为您提供用户屏幕的高度，而您需要浏览器视口(viewport)的高度。

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> 的代码标记到函数，以便可以轻松地将其绑定(bind)到 window.onresize事件。