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」，眼尖的读者可能会发现有一个栏位并未设定垂直置中，那是用来比较给各位看，其实现在的新版浏览器几乎都会将文字预设为垂直置中，省去网页设计师的麻烦。
两种方法：一种是左浮动：{float:left}
Float常跟属性值left、right、none
Float:none
不使用浮动
Float:left
靠左浮动
Float:right
靠右浮动
float语法：
float
:
none
|
left
|right
参数值：
none
:
对象不浮动
left
:
对象浮在左边
right
:
对象浮在右边
<div
class="divcss5">
<div
class="divcss5_left">布局靠左浮动</div>
<div
class="divcss5_right">布局靠右浮动</div>
<div
class="clear"></div><!--
html注释：清除float产生浮动
-->
</div>
二种内联样式：{display:inline}。
例子：
<html>
<head>
<style
type="text/css">
p
{display:
inline}
div
{display:
none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而
div
元素不会显示出来！</p>
<div>div
元素的内容不会显示出来！</div>
</body>
</html>
CSS Grid：这是 CSS 布局实现方式之一。
它可以定义行列宽高什么的，将页面分布成不等大小块。
简单理解请参照 table 标签。
Grid 栅格系统：
它是一种约定式的排版方式。
以规则的网格阵列来指导和规范版面排布以及信息分布。
