CSS 单元格水平对齐属性样式设置

单元格水平对齐

CSS中的text-align属性可以用于设置table表格中的单元格的水平对齐方式，默认情况下，单元格td中的内容一般会采用左对齐的样式。注意，是单元格，因此要添加属性的应该是th元素或td元素，而不是table元素。

语法

th,td{text-align:value;}

单元格水平对齐实例代码，及在线编辑器

下方实例中设计了两个表格，并对比了table元素设置text-align属性与th、td元素设置text-align属性的样式区别：

<table class='e1'border='1'>
  <tr><th>CSS</th><th>HTML</th><th>JavaScript</th></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<br><br>
<table class='e2'border='1'>
  <tr><th>水果</th><th>蔬菜</th><th>零食</th></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>


<style>
  .e1{width:100%;text-align:center;}
  .e2{width:100%;}
  .e2 th,td{text-align:center;}
</style>

text-align属性值

属性值	描述
left	左对齐
right	右对齐
center	居中对齐
justify	拉伸每一行，使每一行具有相等宽度

hot：热门