css - 无法使用 PrimeNg DataTable 将文本居中对齐

Question

我正在尝试同时使用 PrimeNg 和 bootstrap。也许这本质上是不好的？似乎仅靠 PrimeNg 是不够的。

我正在尝试让一个按钮居中显示在他们的文档中:https://www.primefaces.org/primeng/#/datatable/templating然而，对我来说，它总是左对齐。

index.html

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" href="/node_modules/primeng/resources/primeng.min.css" />

foo.component.html

  <p-dataTable [value]="mixData" [editable]="true" sortField="mixType" id="MixTypeTable">

        <p-column id="deleteColumn" styleClass="col-button">
            <ng-template let-row="rowData" pTemplate="body" >
                <a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
            </ng-template>
        </p-column>

    </p-dataTable>

foo.component.ts

@Component({
    selector: 'qtyPane',
    templateUrl: './app/register/foo.component.html',
    styleUrls: ['./app/register/foo.component.css'],
    providers: []
})

在我的 foo.component.css 中，带有按钮的 td 的选择器似乎没有任何效果。其他样式适用于 foo.component.html 中的其他元素，因此我知道已到达 css 但在表格上根本不起作用。

foo.component.css，我尝试了所有这些:

#deleteColumn td {
    text-align: center;
}


table > tbody > td.col-button {
    text-align: center;
}

.col-button {
    width: 10%;
    text-align: center;
}

td.col-button {
    text-align: center;
}

Answer 1

我不确定 styleClass="col-button"的作用，所以我可能是错的，但查看文档我不认为它会将那个类放在 td 上。

这是我首先要尝试的:

<p-column id="deleteColumn" styleClass="col-button">
     <ng-template let-row="rowData" pTemplate="body" >
         <div class="my-center-text">
            <a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
         </div>
     </ng-template>
</p-column>

CSS:

.my-center-text {
    text-align: center;
    width: 100%;
}

如果这不起作用，您可能需要进行某种深度选择。我知道 Angular 处于不断变化的状态，但现在这样的事情可能会起作用:

#deleteColumn /deep/ td {
   text-align: center;
}

因为 Angular 防止一个组件中的样式影响另一个组件，默认情况下您不能直接访问 p 组件内部的 td。通过将/deep/添加到选择器路径，它也会将样式应用于嵌套组件