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

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

WBOY
WBOY原創
2016-06-24 11:27:531297瀏覽

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