+ -
当前位置:首页 → 问答吧 → 不设置高度,如何让三列内容垂直居中

不设置高度,如何让三列内容垂直居中

时间:2010-09-09

来源:互联网


<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- body,td,th { font-size: 12px; color: #333333; } .m{ list-style:none;vertical-align:middle;} .m li{width:100px; float:left;margin-left:10px;} --> </style> </head> <body> <ul class="m"> <li>我的家在哪儿</li> <li>我的家在黄士高超高超高超上的</li> <li>我的家也是在那晨,不过高超高超还要再下下一点</li> </ul> </body> </html>
 提示:您可以先修改部分代码再运行
想让三列,可能会是四列垂直居中,内容不固定,有的时候一列只有一行字,有的会有五六行,现在都是居顶对齐的。

作者: rayson19840610   发布时间: 2010-09-09

设置vertical-align:middle;似乎li没有反应!

作者: rayson19840610   发布时间: 2010-09-09

最简单便捷就是用表格:
<!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=gb2312" /> <title>www.heartonline.com.cn</title> <style type="text/css"> <!-- body,td,th {font-size: 12px;color: #333333;} td{width:100px;} .m{vertical-align:middle;width:300px;} --> </style> </head> <body> <table class="m" border="1"> <tr> <td>我的家在哪儿</td> <td>我的家在黄士高超高超高超上的我的家在哪儿</td> <td>我的家也是在那晨,不过高超高超还要再下下一点我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家也是在那晨,不过高超高超还要再下下一点我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家也是在那晨,不过高超高超还要再下下一点我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家也是在那晨,不过高超高超还要再下下一点我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿我的家在哪儿</td> </tr> </table> </body> </html>
 提示:您可以先修改部分代码再运行
[ 本帖最后由 moyixiu 于 2010-9-9 12:32 编辑 ]

作者: moyixiu   发布时间: 2010-09-09