課程
/前端開發
/HTML/CSS
/網頁布局基礎
height為百分比時,line-height如何設置才能使文本垂直居中
2016-01-27
源自:網頁布局基礎 3-3
正在回答
在文字所在容器設置
display:?flex;justify-content:?center;align-items:?center;
我不是噴子,平時遇見新聞游戲什么的從不花時間評論,但這次我真的不淡定了,學習時間本來就寶貴,我自己也遇到同樣的問題.
還他媽說的一套一套的,就你能是不是?
我很不想罵人,但是這種"謀財害命的事情"令我深惡痛絕,不知道不要瞎BB行么?
line-height呢,你可以理解為每行文字所占的高度。比如說,有一行20px大小的文字,如果設置為line-height:50px,那就是說,這行文字的高度會占50px。顯然,每個字的大小只有20px,那怎么邊呢?于是呢,瀏覽器就把多出來的30px(50px-20px)在這行文字的上面加上了15px,下面加上了15px。這樣的話,那文字就在這50px的空間內是居中的了(這個就是瀏覽器規定的,它就這個分配空間)。這樣的話,如果你的DIV是50px,那么巧了,正好這行文字也就相對于DIV居中了。所以,這樣一來呢,就有了“把line-height設置為容器div的高度就能使文字垂直居中”。
有一種成熟叫認慫 提問者
舉報
讓你精通CSS中三大定位機制,徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-03-26
在文字所在容器設置
2016-10-11
我不是噴子,平時遇見新聞游戲什么的從不花時間評論,但這次我真的不淡定了,學習時間本來就寶貴,我自己也遇到同樣的問題.
2016-10-11
還他媽說的一套一套的,就你能是不是?
2016-10-11
我很不想罵人,但是這種"謀財害命的事情"令我深惡痛絕,不知道不要瞎BB行么?
2016-01-27
line-height呢,你可以理解為每行文字所占的高度。
比如說,有一行20px大小的文字,如果設置為line-height:50px,那就是說,這行文字的高度會占50px。
顯然,每個字的大小只有20px,那怎么邊呢?于是呢,瀏覽器就把多出來的30px(50px-20px)在這行文字的上面加上了15px,下面加上了15px。
這樣的話,那文字就在這50px的空間內是居中的了(這個就是瀏覽器規定的,它就這個分配空間)。
這樣的話,如果你的DIV是50px,那么巧了,正好這行文字也就相對于DIV居中了。
所以,這樣一來呢,就有了“把line-height設置為容器div的高度就能使文字垂直居中”。