当前位置：首页 → 问答吧 → CSS如何控制单元格内文本垂直居中

CSS如何控制单元格内文本垂直居中

时间：2011-03-15

来源：互联网

不设置表格宽度，通过css设置单元格高度，如何控制单元格内文本垂直居中?

HTML code


<!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">
<!--
td {
    vertical-align: middle;
    height: 60px;
}
-->
</style>
</head>

<body>
<table width="200"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td >这是测试文本</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

使用 vertical-align: middle;
无法使单元格内文本垂直居中，请高手指点

作者: dingdot 发布时间: 2011-03-15

这个你注释了把注释去了就可以了

作者: athrunzero 发布时间: 2011-03-15

table的td默认就是垂直居中的啊...

作者: luxu001207 发布时间: 2011-03-15

<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td >这是测试文本</td>
</tr>
</table>

写一个这样的 #content{
margin:0 auto;
height:200px;
width:200px;
line-height:200px
}
应该居可以了吧主要是line-height的高度定义要与div的高度一样你用的是表格我不知道行不行但是我觉得应该可以吧

作者: yhx1991 发布时间: 2011-03-15

上面<table id="content">

作者: yhx1991 发布时间: 2011-03-15

height:20px;
line-height:20px

这样就行了

作者: phuai007 发布时间: 2011-03-15

该回复于2011-03-15 14:20:56被管理员删除

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

dingdot
(dingdot)
等　级：

#7楼得分：0回复于：2011-03-15 13:23:21

引用 5 楼 phuai007 的回复:
height:20px;
line-height:20px

这样就行了

这样是不行的，如果单元格内只有一行文本还好，如果单元格内有多行文本的话，单元格就会被撑开的

作者: ALi99Top 发布时间: 2011-03-15

好像一旦用css控制了单元格的高度，垂直对齐方式就失效了
如果用line-height属性去定义行高的话，对于单元格内只有一的行文本可以实现垂直对齐，若多行文本的话，就得计算一下控制的单元格的高度除以单元格内文本的行数，来计算出行高是多少，一旦这样的话，就必须先确定出单元格内文本的行数。

我想实现的是：
（1）不在table标签和td标签中设置height属性,而是通过css去控制单元格的高度
(2) 通过CSS控制单元格内文本垂直对齐方式

希望有好的解决方法。

作者: dingdot 发布时间: 2011-03-15

引用楼主 dingdot 的回复:
不设置表格宽度，通过css设置单元格高度，如何控制单元格内文本垂直居中?

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ww……

就是嘛，你怎么把它注释掉了

作者: dingdot 发布时间: 2011-03-15

若单元格内不是文本，而是文本框，那就完全失效了
HTML code


<!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">

td {
    vertical-align: middle;
    height:80px;    
}
</style>
</head>

<body>
<table width="200"   border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td >
    <input type="text">
    </td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>