首页 >web前端 >html教程 >css如何设置文本在li元素中垂直居中显示_html/css_WEB-ITnose

css如何设置文本在li元素中垂直居中显示_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:27:531303浏览

css如何设置文本在li元素中垂直居中显示:
本章节介绍一下如何利用css将文本设置为在li元素中垂直居中效果。
实现此效果非常的简单,只要利用line-height属性即可。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>ul li{  width:400px;  height:30px;  line-height:30px;  list-style:none;}</style></head> <body><ul>  <li>蚂蚁部落欢迎您,只有努力奋斗才会有美好的未来</li>  <li>本站的地址是softwhy.com</li>  <li>每一天都是新的,必须要好好的珍惜</li>  <li>下一秒都是虚幻的,必须要把握好现在</li></ul></body></html>

只要将line-height属性值和height属性值设置为相同即可,其实不用height属性只是用line-height属性即可。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16621

更多内容可以参阅:http://www.softwhy.com/divcss/

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn