我有以下的HTML代碼:填充頂出奇怪的行爲
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
padding-top: 50%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
我的哪個瀏覽器(谷歌瀏覽器版57.0.2987.133)編譯成這樣: 我終於拿到了它通過以下方式垂直居中div:
div.alert{
padding-top: 22.5%;
}
通過進一步測試,我發現瀏覽器使用寬度而不是高度來填充填充頂部。
我的問題:爲什麼瀏覽器編譯HTML代碼是這樣,我怎麼能得到它的垂直居中div
使用50%的?
這裏只是迂腐:它不被稱爲「編譯」HTML代碼 - 它是渲染。 – SamJakob
另外,爲什麼div的高度設置爲100%?編輯:不要擔心,誤讀 – SamJakob