li 文字垂直居中的问题

BearRui 2009-03-17 02:22:35
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>

我知道在li可以使用line-heigth:28px;这种方式来实现居中，但如果文件很长超过了li的宽度的自动还行，就会每行都是28px，这样就太长。

我希望实现不管是1行文字还是2行文字都自动居中，见下图(下图的情况就是1行数据没垂直居中)：

...全文
12162 32 打赏 收藏 转发到动态 举报
写回复
用AI写文章
32 条回复
切换为时间正序
请发表友善的回复…
发表回复
tikyan2010 2012-05-09
  • 打赏
  • 举报
 回复
难道没有一个好的办法吗！
Elainecat 2010-11-17
  • 打赏
  • 举报
 回复
ie6 ie7 ie8 火狐 世界之窗 搜狗 浏览器全部处置居中
<div class="top2" >
<ul class="dh">
<li class="dh2"><img src="images/dh_1.jpg" width="41" height="42" border="0"/></li>
<li class="dh3"><a class="font1" href="../index.php"/>XXXXXXXXXXX</a></li>
<li class="dh3">XXXX</li>
<li class="dh3">XXX</li>
<li class="dh3">XXX</li>
<li class="dh3">XXXXXXXX</li>
<li class="dh3">XXXXXXXXX</li>
<li class="dh3">XXXX</li>
<li class="dh3">XXXXX</li>
<li class="dh2" ><img src="images/dh_2.jpg" width="41" height="42" border="0"/></li>
</ul>
</div>



.top2 {
height:42px;
width: 1001px;
float: left;
background-image: url(../images/dh_3.jpg);
background-repeat: repeat-x;
background-position: center top;
vertical-align:top;
}
.dh {
font-size: 14px;
display: inline;
border: 1px solid #FF0000;
}
.dh2 {
list-style-image: none;
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
display: inline;
text-decoration: none;
}
.dh3 {
vertical-align:100%;
list-style-image: none;
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
display: inline;
text-align: left;
text-decoration: none;
}
jsuzzy 2009-10-15
  • 打赏
  • 举报
 回复
我也碰到过类似问题，解决办法只能是换成表格了，目前只有td支持vertical-align:middel
ft2130854 2009-10-15
  • 打赏
  • 举报
 回复
遇到同样的问题，这可咋整
xiaohuixiongya 2009-03-18
  • 打赏
  • 举报
 回复
这样可以啊，（上面的帖子有点错误：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>

BearRui 2009-03-18
  • 打赏
  • 举报
 回复
改成数字就有问题啊，比如padding:2px，当文字是1行的时候可以垂直居中，如果是2行动话就有问题了。
xiaohuixiongya 2009-03-18
  • 打赏
  • 举报
 回复
那你把auto改为具体数字也可以啊！反正是左右边距这个无所谓 比如：padding:2px 5px;
应该行的
BearRui 2009-03-18
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 xiaohuixiongya 的回复:]
如果是一行：line-height:22px可以垂直居中
如果是多行或行数不固定（高度不定）：padding:auto 4px就可以垂直居中
如果是有固定高度（比如说固定显示4行）padding:auto 120px;让后面的“120px”足够大超过固定高度的一半就可以了
[/Quote]

padding不支持auto啊，也没看出效果。
xiaohuixiongya 2009-03-18
  • 打赏
  • 举报
 回复
如果是一行：line-height:22px可以垂直居中
如果是多行或行数不固定（高度不定）：padding:auto 4px就可以垂直居中
如果是有固定高度（比如说固定显示4行）padding:auto 120px;让后面的“120px”足够大超过固定高度的一半就可以了
lishyygh1 2009-03-18
  • 打赏
  • 举报
 回复
padding 加自定义高度.
yoursWTR 2009-03-18
  • 打赏
  • 举报
 回复
用TABLE那种样式一下就出来了 代码不过只多的TR还不用想
BearRui 2009-03-18
  • 打赏
  • 举报
 回复
这样到是可以实现，只是感觉比较麻烦，如果实在不行，就只能找比较笨的方法了。
xiaohuixiongya 2009-03-18
  • 打赏
  • 举报
 回复
你的菜单按钮的宽度和高度是固定的啊，你就可以知道一行大概有多少个字，
当程序读出字时判断一下（如果字的个数>一行可显示的个数就是2行，估计最多放两行吧，太多也不美观）
BearRui 2009-03-18
  • 打赏
  • 举报
 回复
[Quote=引用 23 楼 zing02223 的回复:]
我说个不是方法的方法

文字做按钮图片处理通过background-position定位

li里面照样写上文字

设置
li{
width:xxx;
height:xxx;
text-indent:-2000px;
overflow:hidden;
}

时间比什么都重要。
[/Quote]

文字是动态的，没办法做成图片。而且文字还有多种语言版本。
BearRui 2009-03-18
  • 打赏
  • 举报
 回复
[Quote=引用 22 楼 xiaohuixiongya 的回复:]
你的是高度固定，单行或多行文本都要垂直居中，可能没什么统一的办法了，
你可以把单行的菜单的line-height的值设为和按钮的高度一样，两行的菜单再另外调吧
[/Quote]

但无法判断哪行是多行的，哪行是1行的，因为是动态的。
zing02223 2009-03-18
  • 打赏
  • 举报
 回复
我说个不是方法的方法

文字做按钮图片处理通过background-position定位

li里面照样写上文字

设置
li{
width:xxx;
height:xxx;
text-indent:-2000px;
overflow:hidden;
}

时间比什么都重要。

xiaohuixiongya 2009-03-18
  • 打赏
  • 举报
 回复
你的是高度固定，单行或多行文本都要垂直居中，可能没什么统一的办法了，
你可以把单行的菜单的line-height的值设为和按钮的高度一样，两行的菜单再另外调吧
街头小贩 2009-03-18
  • 打赏
  • 举报
 回复
DC关注！还没发现特别好的！适用于所有浏览器的方案
BearRui 2009-03-18
  • 打赏
  • 举报
 回复
先谢谢楼上的帮忙，不过你的还是跟我的不太一样，你的li高度是自动变换的，我需要是高是不变的。比如把你的改成：

ul li
{
list-style:none;float:none;line-height:18px;padding:2px 0px;width:100%;height:40px;background:#FFF4FB;margin-bottom:10px
}

<body>
<div class="div1">
<ul>
<li>很多电子工程师在某个方面精深 </li>
<li>很多电子工程师在某个方面精深钻研,成为某一个特殊领域的专家,从一开始的养家糊口、慢慢小有收益、</li>
<li>很多电子工程师在某个方面精深钻研,成为某一个特殊领域的专家,从一开始的养家糊口、慢慢小有收益、</li>
</ul>
</div>
</body>

你可以看下，一行的是不居中的，如果把padding改大一点，后面2行的就会把li的高度撑大。
BearRui 2009-03-17
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 shenzhenNBA 的回复:]
给你一个我的例子：
<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; mar…
[/Quote]

你的也不行，你可以试试<div限制宽度，然后li中的字符长度超出
加载更多回复（11）
Li list-style-image 图片垂直居中
list-style-image 图片垂直居中 如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的， 但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法， 就是使用ul li的backgrou-image（背景图片）来解决。 如下： 复制代码代码如下: ul li{ height:28px; /*列表项的高度*/ line-height:28px; /*列表项的行高，行高与高设为相同，文字垂直居中*/ text-indent:15px; /*文字缩进15个像素，不然压到图表了*/ background-image
ul中li内容垂直居中和水平居中的方法
1、li内容垂直居中 flex-direction属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下： HTML部分： 　　 　　 　　aa 　　bb 　　cc 　　dd 　　 　　 CSS部分： 　　<styletype=“text/css”> .box{
html span行居中,div ul li span中的文字垂直居中问题 （含多行文本自动居中）
div ul li span中的文字垂直居中问题 (含多行文本自动居中)2018-09-15div是个容器，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。表格的单元格相当于一行，所以就能垂直居中对于单行文本：垂直居中中的方法比较简单，可能设line-hight与div 的高度一样就行了即可对于多行文本，比较麻烦：可以参...
html li内文字垂直居中,ul li 下图片文字垂直居中
html代码如下：首页cqm8@163.com+86 898 234566对应的css代码如下：.contact ul li {float: left;display: inline;padding: 0 10px;list-style-type: none;}.contact a {font-size: 12px;color: #909090;display: block;text-decora...
ul 中 li 内容垂直居中和水平居中的方法
1、li内容垂直居中 flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下： HTML部分： 1 2 ...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章