表格不能垂直居中问题解决一例(超简单)

原创 2007年09月12日 11:07:00

近日,公司美工在画一个HTML时,发现表格不能垂直居中,很是困惑,示意源代码为:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="77" align="left" bgcolor=red>&nbsp;</td>
    <td align="center" valign="middle" bgcolor=green>&nbsp;</td>
    <td width="77" align="left" bgcolor=blue>&nbsp;</td>
  </tr>
</table>
</body>
</html>

注意,这里只是示意性的代码,其实美工还写了很多的CSS来试图解决此问题,结果都是于事无补,我分析过那些源代码和CSS文件,并没有什么不妥,甚感怪异,后来笔者对多份能成功居中的HTML一比较,如果加上下面这一行的文档定义,问题就解决了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

修改后的代码为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="77" align="left" bgcolor=red>&nbsp;</td>
    <td align="center" valign="middle" bgcolor=green>&nbsp;</td>
    <td width="77" align="left" bgcolor=blue>&nbsp;</td>
  </tr>
</table>
</body>
</html>

OK,就这么简单!

 

div表格定高垂直居中,水平居中

近日做项目,遇到一个难题:就是用div ul li 做表格时,要不就是水平居中不了,要不是垂直居中不来 垂直居中用vertical-align: middle;,但是浮动把它给无效化了 因为定高,所以...
  • xueshanghon_L
  • xueshanghon_L
  • 2016年03月25日 12:14
  • 1633

html中表格table的内容水平和垂直居中显示

html中表格table的内容居中显示 在CSS样式文件中指定#class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; t...
  • xujing19920814
  • xujing19920814
  • 2017年03月27日 13:16
  • 12930

Bootstrap 表格内容水平、垂直居中

水平居中为 td th 设置text-align: center即可 需要注意的是:th 默认为内容居左,td 则没有,所以直接在 th 的父标签 tr上添加 class="text-center...
  • Peng_Hong_fu
  • Peng_Hong_fu
  • 2017年04月24日 21:22
  • 13565

HTML几种设置水平居中和垂直居中的方式

1.平居中设置-定宽块状元素 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。(...
  • qq_14962891
  • qq_14962891
  • 2016年06月29日 15:00
  • 11983

CSS 最新的垂直居中的8个方法

CSS 垂直居中的8个方法 前两天看到一个帖子,是几年前的帖子了,总结利用 CSS 来实现对象的垂直居中有6个方法,结合现在流行的一些方法,我总结出一共有8种CSS垂直居中的方法,大家按实际需要使用对...
  • sinat_15951543
  • sinat_15951543
  • 2016年06月20日 13:49
  • 1430

垂直居中一张图片和多行文字在固定的盒子内

HTML代码 CSS代码.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-a...
  • lin74love
  • lin74love
  • 2017年03月17日 14:49
  • 585

ExtJs 设置GridPanel表格文本垂直居中

ExtJs 设置GridPanel表格文本垂直居中
  • li396864285
  • li396864285
  • 2013年07月12日 14:49
  • 3663

display:inline-block的icon不垂直居中问题

需要了解知识点: 1、基线:基线并不是汉字的下端沿,而是英文字母x的下端沿; 2、行高指的是文本行的基线间的距离; 图片来源链接地址! 进入正题: 父元素设置line...
  • u012076852
  • u012076852
  • 2016年09月07日 11:50
  • 3586

Android 浏览器文本垂直居中问题

问题描述 在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候...
  • jsjsdd
  • jsjsdd
  • 2016年12月10日 14:46
  • 1475

poi 导出word 表格文件

poi导出word文件,其实很简单,下面我为大家写了一个样例//创建一个doc对象 XWPFDocument xdoc = new XWPFDocument(); //创建段落对象 XWPFPar...
  • hw120219
  • hw120219
  • 2017年02月15日 18:56
  • 358
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格不能垂直居中问题解决一例(超简单)
举报原因:
原因补充:

(最多只允许输入30个字)