HTML表格栏位内文字水平置中与垂直置中可以用到不同的技巧，传统的HTML 表格设计属性中，就有对于栏位内元素的水平置中与垂直置中的功能，分别是align与valign这两个功能，新一代的网页设计还有CSS的属性可以做到相同的效果，分别用到text-align以及vertical-align来处理，本篇就把传统的HTML写法以及新的CSS写法分享给各位读者，请直接看范例吧！
范例一、用传统的HTML align与valign属性
呈现结果
范例一先用传统的HTML 表格 align以及valign来设计水平与垂直方向的置中效果，其中align='center'是水平置中，valign="middle"则是垂直置中，这两个功能都要写在表格栏位的<td>标签内才有效果。传统的HTML语法虽然简单，但未来还不确定是否会继续获得浏览器的支援，所以建议还是以CSS来设计会比较妥当，请看范例二的语法
范例二、用CSS的text-align
呈现结果
范例二的程式码有两个红色标注的地方，第一个是在表格<table>标签内的「style=" text-align:center"」，这意思是表格栏位内容的元素全部都预设为水平置中，垂直置中的设定在表格栏位<td>标签内的「vertical-align:middle」，眼尖的读者可能会发现有一个栏位并未设定垂直置中，那是用来比较给各位看，其实现在的新版浏览器几乎都会将文字预设为垂直置中，省去网页设计师的麻烦。
文字垂直居中的有如下的方法
方法一：valign:middle
代码如下：
<table><tbody>
<tr>
<td valign="middle">垂直居中</td>
</tr>
</tbody>
</table>
方法二：style="display:table-cell vertical-align:middle"
代码如下：
<table><tbody>
<tr>
<td style="display:table-cell vertical-align:middle">垂直居中</td>
</tr>
</tbody>
</table>
方法三：style="height：20px/*高度根据实际情况设置*/ line-height:22px/*根据实际情况设置到达垂直居中即可*/"
<table><tbody>
<tr>
<td style="height：20px/*高度根据实际情况设置*/ line-height:22px/*根据实际情况设置到达垂直居中即可*/">垂直居中</td>
</tr>
</tbody>
</table>
<style>
.tongpian6 {
height: 50px
padding-left: 20px
vertical-align: middle
}
</style>
<table border="1">
<tr>
<td class="tongpian6">hehehe</td>
</tr>
</table>
因为：
1、表格内左边距使用padding-left，而不是margin-left。margin-left叫外左边距。
2、单元格垂直居中，设定vertical-align为middle，而不是bottom（靠下）。
扩展资料：css文本和div垂直居中方法总结
对文本，只需要对其父级元素设置text-align: center，而对div等块级元素，只需要设置其left和right的margin值为auto。
要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
1、单行文本垂直居中
对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：
<!--html代码-->
<div id="div1">
这是单行文本垂直居中
</div>
/*css代码*/
#div1{
width: 300px
height: 100px
margin: 50px auto
border: 1px solid red
line-height: 100px/*设置line-height与父级元素的height相等*/
text-align: center/*设置文本水平居中*/
overflow: hidden/*防止内容超出容器或者产生自动换行*/
2、子div垂直居中
<!--html代码-->
<div id="outer">
<div id="middle">
子div(固定大小)垂直居中
</div>
</div>
/*css代码*/
#outer{
background-color: #13CDF4
width: 300px
height: 200px
position: relative
}
#middle{
background-color: #E41627
width: 100px
height: 100px
margin: auto
position: absolute
left: 50%
top: 50%
margin-left: -50px
margin-top: -50px
}
![[HTML问题] 标签中的class如何理解？](/aiimages/%5BHTML%E9%97%AE%E9%A2%98%5D+%E6%A0%87%E7%AD%BE%E4%B8%AD%E7%9A%84class%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3%EF%BC%9F.png)
