li 文字垂直居中的问题ulliaaa/lilibbb/liliccc/liliddd/li/ul我知道在li可以使用lin
li 文字垂直居中的问题
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
我知道在li可以使用line-heigth:28px;这种方式来实现居中，但如果文件很长超过了li的宽度的自动还行，就会每行都是28px，这样就太长。
我希望实现不管是1行文字还是2行文字都自动居中，见下图(下图的情况就是1行数据没垂直居中)：
[解决办法]
ul li{padding:5px, 4px;} //不要给LI设定高度,只固定宽度.
<ul>
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
<li>ddd </li>
</ul>
[解决办法]
你加个vertical-align:middle;试试
[解决办法]
[解决办法]给你一个我的例子：
<div id="menu" class="menuTag01">
<ul>
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
<li>ddd </li>
</ul>
</div>
--------------------------------
CSS内容：
--------------------------------
<style type="text/css">
.menuTag01{height:26px; font-size:12px; font-family:verdana,Arial,; color:#FF3300; background:#CCFF99 url(end_n_bg3.gif) bottom repeat-x; padding:0px; margin:0px;}
.menuTag01 ul{float:left; margin:0px;}
.menuTag01 li{float:left; line-height:24px; margin:0px 5px; list-style-type:none; padding:0px; background:#FFEFDF; border-left:1px solid blue; border-right:1px solid blue; border-top:1px solid blue; font-weight:bold;}
.menuTag01 a{color:#CC0000; padding:0px 10px; text-align:center; text-decoration:none; float:left;}
.menuTag01 a:hover{background:#FF9933;height:25px;}
.menuTag01 a:visited{color:#CC0000;}
.menuTag01 .active{background:#FFF; height:25px;}
.menuTag01 .text{float:left; padding:6px 0px 0px 20px; font-family:verdana, arial; font-size:12px; color:#666666;}
</style>
-----------------------------------
修改到你需要的高度即可以了，图片end_n_bg3.gif可以是一个像素，建议颜色和边框一样；
这样居中了吧？ 可以加分不？呵呵...穷多了,.....^=^
[解决办法]如果是一行：line-height:22px可以垂直居中
如果是多行或行数不固定（高度不定）：padding:auto 4px就可以垂直居中
如果是有固定高度（比如说固定显示4行）padding:auto 120px;让后面的“120px”足够大超过固定高度的一半就可以了
[解决办法]那你把auto改为具体数字也可以啊！反正是左右边距这个无所谓 比如：padding:2px 5px;
应该行的
[解决办法]这样可以啊，（上面的帖子有点错误：padding:20px 40px 意思是上下边距20px 左右边距40px）
我是了一下改为数字可以
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*
{
margin:0px;padding:0px
}
body
{
width:100%;height:10%;text-align:center;font-size:12px
}
.div1
{
width:400px;height:400px;margin:20px auto;background:#aaccff;
}
ul
{
width:360px;height:auto;background:#F1FDC1;
}
ul li
{
list-style:none;float:none;line-height:18px;padding:20px 0px;width:100%;height:auto;background:#FFF4FB;margin-bottom:10px
}
</style>
<body>
<div class="div1">
<ul>
<li>很多电子工程师在某个方面精深 </li>
<li>很多电子工程师在某个方面精深钻研,成为某一个特殊领域的专家,从一开始的养家糊口、慢慢小有收益、最后宝马豪宅,也是有的;这些电子工程师可能没有而言,已经基本够用了;
</li>
<li>很多电子工程师在某个方面精深钻研,成为某一个特殊领域的专家,从一开始的养家糊口、慢慢小有收益、最后宝马豪宅,也是有的;这些电子工程师可能没有而言,已经基本够用了;
</li>
</ul>
</div>
</body>
</html>
[解决办法]
我说个不是方法的方法
文字做按钮图片处理通过background-position定位
li里面照样写上文字
设置
li{
width:xxx;
height:xxx;
text-indent:-2000px;
overflow:hidden;
}
时间比什么都重要。
[解决办法]
你的菜单按钮的宽度和高度是固定的啊，你就可以知道一行大概有多少个字，
当程序读出字时判断一下（如果字的个数>一行可显示的个数就是2行，估计最多放两行吧，太多也不美观）
