如何防止浏览器的宽度影响文本的垂直位置？

Question

我有以下HTML和CSS

<body>
<p>Foo Foo Foo</p>
</body>

p {
    font-size: 50px;
    font-weight: 600;
    margin-top: 20%;
}

如果您要在浏览器中打开此代码，则减小浏览器的宽度会使文本向上移动。 避免这种情况的最简单方法是什么？

Answer 1

margin-top值是根据视口宽度（屏幕窗口）计算的。

你需要使用像em这样的另一个相对单位或像px这样的绝对单位。

这部分取决于您尝试创建的效果。

Answer 2

我假设你无能为力。 即使你做了一些让它工作的东西（比如使容器成为内联元素），它也会成为一个黑客。

百分比是根据生成的框的包含块的宽度计算的。 对于'margin-top'和'margin-bottom'也是如此。

在W3阅读更多内容