<style type="text/css">
td {
text-align:center/*设置水平居中*/
vertical-align:middle/*设置垂直居中*/
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="800px" height="190px">
<tr>
<td>monday</td>
<td>tuesday</td>
<td>wednesday</td>
</tr>
<tr>
<td>thursday</td>
<td>friday</td>
<td>satarday</td>
</tr>
<tr>
<td>sunday</td>
<td>friday</td>
<td>satarday</td>
</tr>
</table>
</body>
说明：如果要在css中控制<td>标签中的文字垂直居中，那么可以设置td标签选择器下的属性：vertical-align这个属性有三个值：top ，bottom，middle 其中，middle属性值代表垂直居中。
代码：td {
vertical-align:middle
}
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」，眼尖的读者可能会发现有一个栏位并未设定垂直置中，那是用来比较给各位看，其实现在的新版浏览器几乎都会将文字预设为垂直置中，省去网页设计师的麻烦。
用DW，这种做法也是每个里面都加上align=center，如果觉得代码不够简练就用CSStd {
text-align: center
}
相同的
.ys{
你的CSS代码
}
你自己命名的class 前面得加点的哦 .ys{}
span class=ys 标准写法是要加上引号的 <span class = "ys"></span>align=center也是
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）