如何将svg元素放置在图像宽度的中间
如何将svg元素放置在图像宽度的中间
提问于 2018-07-01 00:50:46
现在，当我删除时，svg图标位于div.video-open-container的中心。如何将svg放在img标签上，不需要移除div包装器就可以实现？
.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>
回答 1
Stack Overflow用户
发布于 2018-07-01 22:09:25
.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51116791
复制相关文章
相似问题
腾讯云开发者
