css3 - 學習css構建圖形時，遇到一個很有意思的現象，具體代碼如下
問題描述
<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>CSS構建圖形</title> <style type='text/css'>#circle{ width: 100px; height: 100px; background-color: #4285F4; border-radius: 50%;/*我的理解是各邊長度的百分比*/ text-align: center; line-height: 100px; float: left;}#oval{ background-color: #4285F4; text-align: center; line-height: 100px; width: 200px; height: 100px; border-radius: 50%; float:left;}#triangle-up{ font-size: 12px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; background-color: #4285F4; text-align: center;float: left; margin-left: 10px;}#triangle-down{ text-align: center; width: 0; height: 0; border-left: 50px solid pink; border-right: 50px solid pink; border-top: 100px solid red; float:left; margin-left: 10px;} </style></head><body> <p id='circle'>圓形</p> <p id='oval'>橢圓</p> <p id='triangle-up'>上三角形</p> <p id='triangle-down'>下三角形</p></body></html>
我想在圖形中添加文字 在三角形中文字老是下移，原因是啥？多謝
問題解答
回答1：因為你設置了width:0;寬度為0，文字沒有顯示的空間自然一直向下換行，可以用偽代碼實現
#triangle-up,#triangle-down{ position:relative;}#triangle-up::after,#triangle-down::after{ content:'上三角形'; position:absolute; left:0; right:0; margin:auto; top:50%; transform:translate(0,-50%,0);}回答2：
因為看到三角形只是p的border,文字是在p的content里面的
回答3：標簽內的文字默認與基線對齊。 而這里的基線可以看作是 border 的內邊界。所以上三角的基線位置在上方，容器區域在上方； 下三角的基線位置在下方，容器區域在下方。
文字的white-space屬性默認是忽略空白。寬度為 0 的情況下垂直展示文本
網公網安備