语义UI - 表 - 中心对齐

Question

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

当我"center aligned"为我的元素指定类时,我期望文本居中对齐,但事实并非如此.

但是,如果我在所有元素上指定相同的类,那么它可以工作.

当指定一个班级并且所有孩子都继承时,这不足以满足要求吗？

小提琴是在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

你需要为所有th元素添加"居中对齐".

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