语义 UI - Table - 居中对齐

Question

为什么居中对齐不起作用？

当我为我的元素指定 class "center aligned" 时，我希望文本居中对齐，但事实并非如此。

但是，如果我在所有元素上指定相同的 class 则它会起作用。

指定 class 并且所有子级都继承是否就足够了？

A fiddle 在 http://jsfiddle.net/4woemsjt/4/

Basically this one does not work.

<div class="ui grid centered">
    <div class="fourteen wide column">
      <table class="ui celled collapsing table">
        <thead>
        <tr class="center aligned">
          <th class="three wide">S1</th>
          <th class="three wide">S2</th>
          <th class="two wide">S3</th>   
        </tr>
        </thead>
        <tbody>
        <tr>                  
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>
        </tbody>
      </table>
    </div>
</div>

但是这个确实如此

<div class="ui grid centered">
    <div class="fourteen wide column">
      <table class="ui celled collapsing table">
        <thead>
        <tr>
          <th class="center aligned three wide">S1</th>
          <th class="center aligned three wide">S2</th>
          <th class="center aligned two wide">S3</th>   
        </tr>
        </thead>
        <tbody>
        <tr>                  
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>
        </tbody>
      </table>
    </div>
</div>

Answer 1

您需要将 "center aligned" 添加到所有元素。

".ui.table thead th" 在 .css 文件中将 "text-align:left" 设置为默认值。

语义 UI - Table - 居中对齐

semantic UI - Table - Centre Alignment

css

frontend

semantic-ui