CSS 定位问题 [img|span]

Question

我对 css 很陌生，因此并不擅长。我需要在图标旁边放置一个文本。如您所见，它只需要上升几个像素。我尝试了保证金，但它不起作用。我只是缺乏知识。您看到的附加代码段位于 table 数据字段中。

<td style="width:37%;" [class]="diffColorStatus(zeile)">
   <div class="status">
       <img class="statusIcon" src="../assets/rotZeichen.PNG" width="30px" *ngIf="diffColorStatus(zeile) == 'redMarkStatus'" />
       <img class="statusIcon" src="../assets/gelbZeichen.PNG" width="30px" *ngIf="diffColorStatus(zeile) == 'yellowMarkStatus'" />
       <img class="statusIcon" src="../assets/gruenZeichen.PNG" width="30px" *ngIf="diffColorStatus(zeile) == 'greenMarkStatus'" />
       <span id="statusText">{{zeile[0]}}</span>
   </div>
</td>

icon/text

Answer 1

一个非常快速的解决方法是将以下样式应用于跨度 (id = statusText)：

#statusText {
  position: relative;
  top: -2px;
}

我们在这里做的是设置相对定位的跨度，这样它就不会偏离（像绝对定位一样）并设置一定数量的负顶部位置以与图标对齐。

CSS 定位问题 [img|span]

CSS positioning issue [img|span]

html

css

positioning

css-position

angular