如何在图像宽度的中间放置一个svg元素

时间:2018-06-30 16:50:46

标签: html css

现在,当我移除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>


   

1 个答案:

答案 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>