關于使用line-height達到正向居中效果的疑問
?#tabs?ul{list-style:none;height:30px;line-height:30px;border-bottom:solid?2px?saddlebrown;} /*主DIV下的UL{消除列表默認圓點;高30PX;行距30PX達到縱向居中效果;下邊框:實線?2PX?重褐色}*/? 為什么12-15行注釋說line-height能達到縱向居中效果;這里的ul、li標簽的行高為何設置的跟其自身高度一樣?是因為這樣所以達到縱向居中的效果的嗎?誰能稍詳細點給我解釋下嗎,謝謝
2014-11-29
一般在網頁設計中,文字的line-height的值和所在父級元素的值相同的時候,文字會居中,想要看詳細的line-height可以看這里,如果你能完全看完的話。
2014-11-29
? ? line-height呢,你可以理解為每行文字所占的高度。
? ? 比如說,有一行20px大小的文字,如果設置為line-height:50px,那就是說,這行文字的高度會占50px。
? ? 顯然,每個字的大小只有20px,那怎么邊呢?于是呢,瀏覽器就把多出來的30px(50px-20px)在這行文字的上面加上了15px,下面加上了15px。
? ? 這樣的話,那文字就在這50px的空間內是居中的了(這個就是瀏覽器規定的,它就這個分配空間)。
? ? 這樣的話,如果你的DIV是50px,那么巧了,正好這行文字也就相對于DIV居中了。
? ? 所以,這樣一來呢,就有了“把line-height設置為容器div的高度就能使文字垂直居中”。
以上內容摘自百度知道的答案,供后來學習者參考