                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

关于使用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标签的行高为何设置的跟其自身高度一样？是因为这样所以达到纵向居中的效果的吗？谁能稍详细点给我解释下吗，谢谢

ShawpLee

2014-11-29

源自：JavaScript进阶篇 10-1

关注问题我要回答

1527

操作

收起

2 回答

绿岛之北
2014-11-29

一般在网页设计中，文字的line-height的值和所在父级元素的值相同的时候，文字会居中，想要看详细的line-height可以看这里，如果你能完全看完的话。

0 回复有任何疑惑可以回复我~

#1

ShawpLee 提问者

看哪里？链接被屏蔽了么？

2014-11-29 回复有任何疑惑可以回复我~

#2

没有，“这里”，把鼠标放上去就是链接，可以打开

2014-11-30 回复有任何疑惑可以回复我~

ShawpLee 提问者
2014-11-29

line-height呢，你可以理解为每行文字所占的高度。
比如说，有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。
显然，每个字的大小只有20px，那怎么边呢？于是呢，浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。
这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。
这样的话，如果你的DIV是50px，那么巧了，正好这行文字也就相对于DIV居中了。
所以，这样一来呢，就有了“把line-height设置为容器div的高度就能使文字垂直居中”。

以上内容摘自百度知道的答案，供后来学习者参考

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JavaScript进阶篇

参与学习 468191 人
解答问题 21891 个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

本课相似问答

2 回答关于使用getElementsTagName不能实现效果

1 回答#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

2 回答关于练习的效果问题

1 回答关于highlight()中this的指向问题

1 回答height: 30px;line-height: 30px,这两句有啥区别？

搜索更多本课相关问答

关于使用line-height达到正向居中效果的疑问

我要回答关注问题

意见反馈帮助中心 APP下载