近日，公司美工在画一个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> </td>
<td align="center" valign="middle" bgcolor=green> </td>
<td width="77" align="left" bgcolor=blue> </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> </td>
<td align="center" valign="middle" bgcolor=green> </td>
<td width="77" align="left" bgcolor=blue> </td>
</tr>
</table>
</body>
</html>
OK，就这么简单！
分享到：
相关推荐
本知识点将详细讲解如何使用纯CSS技术来实现一个图片在其父容器中水平和垂直居中，特别是在给定的尺寸约束条件下。 ### 关键知识点 1. **CSS垂直居中技术**：在CSS中实现垂直居中有多种方法，常见的包括使用`...
在网页设计中，将图片相对于上层的Div元素实现水平和垂直居中是一项常见的需求。这个问题可以通过CSS样式来解决，尤其是利用CSS布局技巧。...在本例中，使用`display: table-cell`是一种简单且广泛支持的解决方案。
以宽为例，选取想改变宽度的单元格，再用鼠标拖动表格线，这样改变的只是所选定部分的宽度，原来处在同一列的其它单元格不受影响。 处理超长表格的一些技巧 处理超长表格的一些技巧是指在 Word 表格中处理超长表格...
### Excel 水平居中命令的实现及详解 #### 背景介绍 在Excel操作过程中，数据的对齐方式对于美观性和易读性至...此外，还可以进一步扩展功能，比如增加垂直居中、添加边框等样式设置，以满足更多样化的应用场景需求。
要实现容器内图片上下左右居中，我们通常会使用CSS的text-align属性来实现水平居中，然而，单纯使用text-align并不能解决垂直居中的问题。在本例中，我们可以通过使用display属性和vertical-align属性来实现图片的...
在CSS中，制作细线表格是一项常见的任务，它可以使数据展示更加清晰且美观。下面将详细介绍如何使用CSS来优化和创建细线表格，以及其中涉及的关键属性。 首先，要实现细线表格，一个非常关键的属性是`border-...
下面是程序一例： 程序代码:sql = "select * from tablename"; rs = stmt.executeQuery(sql); //新建Excel文件 String filePath=request.getRealPath("aaa.xls"); File myFilePath=new File(filePath); ...
本篇文章将深入探讨如何使用CSS（层叠样式表）来实现文字在一条线上的垂直居中显示，以“网页特效”为例，将其放置在虚线框内。 首先，我们看到HTML代码中包含了一个`<fieldset>`元素，这个元素通常用于组织表单内...
在Excel中制作复杂表头是一项常见但有时颇具挑战性的任务，尤其对于中文表格而言，由于表头可能包含多个层次和维度的信息，使得制作过程更为复杂。以下将详细介绍如何巧妙地在Excel中创建复杂的表头。 首先，对于带...
格式设置是指对工作表的外观和布局的设置，包括水平居中对齐、垂直居中对齐、行高、列宽等。在本例中，我们将对表格线进行设置，包括内网格线和外框线。 八、保存和提交作业 最后，我们需要保存文件并提交作业。在...
`，使得复选框与其相邻的标签保持垂直居中对齐。同时，`padding: 2px;`增加了复选框周围的内边距，提供了一定的视觉缓冲。 3. `label`选择器则确保了`<label>`元素也具有`vertical-align: middle;`，使其与关联的...
正确使用`vertical-align`不仅可以解决`<input>`和`<img>`的对齐问题，还能帮助调整其他行内元素的布局，如文本、链接等，使得整个页面布局更加美观和专业。在实际开发中，掌握这一属性的用法对于优化用户体验至关...
- **表头**：设置字体为宋体，加粗，颜色为白色，底色为深蓝，垂直和水平居中对齐。 - **正文**：设置字体为宋体，颜色为深蓝，底色为灰色，垂直和水平居中对齐。 - **边框**：为单元格添加全部边框。 - **文本...
此例中，图片居中显示，文本位于底部中央。 ### 4. 表格布局（TableLayout） 表格布局由行（TableRow）组成，适合创建网格状的视图结构。每个`TableRow`可包含多个子视图，类似HTML中的表格。例如： ```xml ...
下面是程序一例: 程序代码:sql = "select * from tablename"; rs = stmt.executeQuery(sql); //新建Excel文件 String filePath=request.getRealPath("aaa.xls"); File myFilePath=new File...
本例中需要在文件夹 `kk` 下创建一个名为 `stu` 的新文件夹。可以在目标位置点击右键选择“新建”->“文件夹”来完成。 5. **更改文件夹属性**：文件夹属性包括只读、隐藏、存档等。例如，需要将文件夹 `stu` 的...
// 文本垂直居中方式 Range.WrapText = true; // 文本自动换行 Range.Interior.ColorIndex = 39; // 填充颜色为淡紫色 Range.Font.Color = clBlue; // 字体颜色 xlsApp.DisplayAlerts = false; // 保存 Excel 的...
- 将筛选结果复制到另一工作表（如sheet2）的指定位置（本例中为A1单元格起始）。 ### 五、PowerPoint演示文稿操作 **1. 幻灯片版式设置** - 打开PPT文件（如exam5.pptx）。 - 新建幻灯片，设置第1张幻灯片版式为...