在css中對元素進行水平居中是非常簡單的,然而使元素垂直居中就不是一件簡單的事情了,多年以來,垂直居中已經成為了CSS領域的圣杯,因為它是極其常見的需求,但是在實踐中卻不是一件簡單的事情。下面我會簡單介紹水平居中,并著重討論垂直居中。
第一部分:水平居中
1.實現行內元素的居中。方法:在行內元素外面的塊元素的樣式中添加:text-align:center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{text-align: center;} img{width: 200px;height: 200px;border: thin solid red;} </style> </head> <body> <div> <img src="pic.png"> </div> </body> </html>
延伸閱讀
學習是年輕人改變自己的最好方式