原始代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>為什么加號沒有水平居中</title>
</head>
<body>
<style>
div{
position: absolute;
top:50%;
left:50%;
width:50px;
height:50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 329px;
}
</style>
<div>+</div>
</body>
</html>
解析
沒做特別的設(shè)定，行內(nèi)框自然從行框的左邊開始
我推測：由于css最先來自于排版。所以默認(rèn)字都是從左往右寫的，沒做特殊設(shè)定的時候，字體這個行內(nèi)框的左側(cè)有邊界問題，就是不能超過臨近行框的左側(cè)。字體小的時候，行內(nèi)框的元素居中，是因為也沒有碰到行框的左邊。但是當(dāng)字體不斷擴大的時候，直到碰壁（姑且叫做“左側(cè)碰壁假說”，沒找到相關(guān)資料）。由于前面所講的前提，碰壁之后沒有辦法，雖然text-align做了居中，但是左側(cè)碰壁假說的作用力會更強，因而導(dǎo)致文字被迫向右移。
當(dāng)然cyl提到左側(cè)碰壁并非不可破解的。利用負(fù)邊距可以使行框內(nèi)的行內(nèi)框打破這個規(guī)矩。
需要深入了解的
- 行內(nèi)框
- 行框
