li 文字垂直居中的有关问题
日期：2014-05-17 浏览次数：20602 次
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
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
