text-align 和 margin CSS 属性没有响应

Question

.scss

div.playlist {
    position: relative;
    display: inline-block;
}
div.playlist {
    span {
        position: absolute;
        text-align: center;
        height: 100%;
        width: 100%;
        color: white;
        font-size: 20px;
    }
    .span-icon {
        padding-bottom: 50px !important;
    }
}
div.playlist span:before {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    content: '';
}

.html

<div class="playlist">
  <span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
  <span>{{data.text}}</span>
  <img [src]="data.imageUrl" [alt]="data.text" />
</div>

输出

现在我需要如下所示。请不要考虑不同的icon 类型和text。我只需要这个。我需要响应式top right 和bottom right 外观的@987654331 @ 和text。我尝试过使用text-align: right 和margin 属性。但是你知道这种方法对不同的视图端口没有响应。那么你能帮我解决这个问题吗？

Answer 1

<div class="playlist">
  <span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
  <span class="span-text">{{data.text}}</span>
  <img [src]="data.imageUrl" [alt]="data.text" />
</div>

CSS

.span-icon {
  position: absolute;
  top: 0; 
  right: 0;
}
.span-icon {
  position: absolute;
  bottom: 0; 
  right: 0;
}

您只需将图标设置为绝对值并将其定位为top、right。 ...

Answer 2

将您的图标和跨度文本定位为absolute，然后如果需要，您可以使用CSS calc() function 将它们与图片上方的top-right 和bottom-right 对齐。

.playlist {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 200px;
  overflow: hidden;
}

.playlist img {
  width: 100%;
  height: 100%;
}

.playlist .span-icon {
  position: absolute;
  top: 5px;
  right: calc(100% - 98%);
  color: #fff;
}

.playlist .tm {
  position: absolute;
  bottom: 5px;
  right: calc(100% - 98%);
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="playlist">
  <span class="span-icon"><i class="fa fa-film"></i></span>
  <span class="tm">2:10</span>
  <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg">
</div>