如何防止瀏覽器的寬度影響文本的垂直位置？

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

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

如果你在瀏覽器中打開此代碼，減少瀏覽器的寬度會使文本向上移動。避免這種情況的最簡單方法是什麼？

2013-04-20 zch

這是關係到你的問題，可能會回答它：http://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when- window-height-decrease – 2013-04-20 17:59:09

謝謝@RichardHaber--接受答案中的鏈接非常足智多謀。（http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties） – zch 2013-04-20 18:09:41

你見過視臺（VW，VH，最小值）？ http://caniuse.com/#feat=viewport-units – cimmanon 2013-04-20 18:52:24

我想你可以做什麼了。即使你做了一些工作（比如讓容器成爲內聯元素），它也是一種破解。

該百分比是相對於生成的框的包含塊的寬度計算的。對於'邊緣頂部'和'邊緣底部'也是如此。

更多的W3

2013-04-20 18:07:34

的margin-top值是基於視口（屏幕窗口）的寬度來計算。

您需要使用另一個相對單位像em或類似px絕對單位。

這在很大程度上取決於您要創建效果的一部分。

2013-04-20 18:01:12

回答