Semantic-UI 表格文本对齐变化

Semantic-UI 是一种流行的前端框架，它可以帮助前端开发人员快速地创建美观、易于维护的 web 应用程序。在 Semantic-UI 中，表格是一个常用的组件，可以用来展示各种数据。

表格中的文本对齐方式对于数据的可读性和易用性非常重要。在 Semantic-UI 中，你可以很容易地改变表格中的文本对齐方式，以适应不同的需求。

下面是一些常见的文本对齐方式及其用法：

默认样式

在表格中，文本默认是向左对齐的，标题则是居中对齐的。这是最常用的对齐方式。

<table class="ui celled table">
  <thead>
    <tr>
      <th>名称</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

居中对齐

如果你想将文本居中对齐，可以使用 center aligned 类。

<table class="ui celled table">
  <thead>
    <tr>
      <th class="center aligned">名称</th>
      <th class="center aligned">年龄</th>
      <th class="center aligned">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="center aligned">张三</td>
      <td class="center aligned">25</td>
      <td class="center aligned">男</td>
    </tr>
    <tr>
      <td class="center aligned">李四</td>
      <td class="center aligned">30</td>
      <td class="center aligned">女</td>
    </tr>
  </tbody>
</table>

向右对齐

如果你想将文本向右对齐，可以使用 right aligned 类。

<table class="ui celled table">
  <thead>
    <tr>
      <th class="right aligned">名称</th>
      <th class="right aligned">年龄</th>
      <th class="right aligned">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="right aligned">张三</td>
      <td class="right aligned">25</td>
      <td class="right aligned">男</td>
    </tr>
    <tr>
      <td class="right aligned">李四</td>
      <td class="right aligned">30</td>
      <td class="right aligned">女</td>
    </tr>
  </tbody>
</table>

向左对齐

如果你想将文本向左对齐，可以使用 left aligned 类。

<table class="ui celled table">
  <thead>
    <tr>
      <th class="left aligned">名称</th>
      <th class="left aligned">年龄</th>
      <th class="left aligned">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="left aligned">张三</td>
      <td class="left aligned">25</td>
      <td class="left aligned">男</td>
    </tr>
    <tr>
      <td class="left aligned">李四</td>
      <td class="left aligned">30</td>
      <td class="left aligned">女</td>
    </tr>
  </tbody>
</table>

总结

以上就是关于 Semantic-UI 表格文本对齐变化的介绍。你可以根据自己的需求改变表格中的文本对齐方式，以适应不同的显示效果。文本对齐设置的方式很简单，你可以轻松地上手使用。