彈性盒子的行高設定文字垂直居中
阿新 • • 發佈：2018-12-02
彈性盒子的行高設定文字垂直居中
行高設定居中對齊，是針對內容寬度
在CSS3的border-sizing模式下，是內減模式
所以要減去padding和border
要小心
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } div { /*width: 300px;*/ /*height: 300px;*/ width: 200px; height: 200px; background-color: pink; margin: 100px auto; } /*彈性盒子，文字顯示在減去border和padding後的區域內，不是width content盒子，就是用width即可*/ a { display: block; width: 200px; height: 200px; border: 70px solid red; line-height: 60px; } </style> </head> <body> <div> <a href="#">name</a> </div> </body> </html>