代码之家 › 专栏 › 技术社区 › Logan Wlv

角形5材料,使跨距居中到垫头单元中

angular5 angular css html

Logan Wlv · 技术社区 · 6 年前

在Angular5应用程序中,我使用Material表来显示一些数据。

进入一个 mat header cell i am having a span and a img together and trying to align them properly.


   
    
     
      
       
        
         现在的样子是:
        
        
         
          
         
        
        
         这里是件HTML代码:
        
        <ng container matcolumndef=“batchstate”>
<mat header cell*matheadercelldef style=“border:1px solid white;”>
<span style=“border:1px solid white;”>批处理状态</span>
<img style=“border:1px solid white;”src='../../assets/filter_list.png'(单击)=“filterbystate()”
mattooltip=“按状态筛选”/>
</mat标题单元格
<mat cell*matcelldef=“let inst”>
仪器批次状态
</mat单元格
</ng容器
< /代码> 

我想让我的span显示在单元格的中间左侧,Treedtext-Align:Center;Left:0px;andpadding-top:25%;padding-bottom:25%(inside my span element)but these css did not work,any way to reach that?img把它们放在一起,试着把它们对齐。


现在的情况如下:



这里是件HTML代码:

<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;"> 
    <span style="border: 1px solid white;">Batch state </span>
    <img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()" 
        matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
        {{inst.batchState}} 
</mat-cell>
</ng-container>


我想要我的跨度要显示在单元格的左中,请尝试text-align:center; left:0px;和padding-top: 25%; padding-bottom: 25%(在我的SPAN元素中)但是那些CSS不起作用,有没有办法做到这一点?

1 回复 | 直到 6 年前

Logan Wlv 6 年前

解决方案发现将CSS添加到 mat header cell -> display:flex;align items:center;


   
    
     
      <ng container matcolumndef=“batchstate”>
<mat header cell*matheadercelldef style=“border:1px solid white;display:flex;align items:center;”>
<span style=“border:1px solid white;”>批处理状态</span>
<img style=“border:1px solid white;”src='../../assets/filter_list.png'(单击)=“filterbystate()”
mattooltip=“按状态筛选”/>
</mat标题单元格
<mat cell*matcelldef=“let inst”>
仪器批次状态
</mat单元格
</ng容器
< /代码>