文本对齐和保证金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。我只是需要this.I需要一个响应top right和bottom right外观icon和text。我与text-align: right和尝试margin properties.But你知道这种方法不能响应不同的视图端口。所以你能帮我解决这个问题吗？

Answer 1

位置的图标和文字跨度为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>

Answer 2

<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设置图标绝对并将其定位。 ...