现在,当我移除svg图标时,它会位于div.video-open-container的中心。如何在不删除div包装器的情况下将svg放在img标签上?
.video-open-container {
display: flex;
justify-content: center;
}
svg {
position: relative;
width: 64px;
height: 64px;
transform: translate(-50%, -50%);
}
<div class="details">
<img class="movie-img-details" [src]="getImageSrc()">
<div class="video-open-container">
<svg class="video-open" (click)='openDialog()' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
</div>
</div>
答案 0 :(得分:1)
.video-open-container {
display: flex;
justify-content: center;
}
svg {
position: relative;
width: 64px;
height: 64px;
transform: translate(-50%, -50%);
}
.details {
margin-left: 50%;
position: absolute;
}
<div class="details">
<img class="movie-img-details" [src]="getImageSrc()">
<div class="video-open-container">
<svg class="video-open" (click)='openDialog()' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
</div>
</div>