css覆盖img中心在错误的地方

Question

I have list-group-item elements that each holds an image and some text. The image is set to the left, text to the right.

I want a play icon overlay over the image, in its center, but instead its centered on the list-group-item instead. I'm using bootstrap 4.4.1.

Html

<div class="video-list-stacked">
  <ul class='list-group video-list-container'>
    <li id="some-guid-01" class="list-group-item video-item">
      <div class=video-item-img>
        <img src="https://via.placeholder.com/140x100" />
        <img class="video-item-playicon" src="https://images.vexels.com/media/users/3/131784/isolated/preview/a9ff82db0cf438516e13b8c3bf918a00-play-flat-icon-by-vexels.png">
      </div>
      <div class="video-item-details">
        <h4>Video Title 1</h4>
        <div>Description for Video Title 1. A little description that elaborates what this is. The description should take not more than two lines.</div>
        <span class="video-item-tag">Tag One</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
        <span class="video-item-tag">Some other tag</span>
      </div>
    </li>
</div>

CSS

.video-item{
 display: flex;
 padding-left: 5px;
}

.video-item-details {
  padding-left: 10px;
}

.video-item-tag {
  background: #2196F3;
  padding: 2px 10px 2px 10px;
  float: left;
  margin: 2px;
  margin-bottom: 5px;
  border-radius: 100px;
  color: white;
  font-family: monospace;
  font-size: 8pt;
  position: relative;
  cursor: pointer;
  
  text-align: center;
}

.video-item-playicon {
  position: absolute;
  width: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer: center;
}

What do I need to do to make the play icon appear centered in the image?

Answer 1

I added css for video-item-img to set the width and to position relatively because using position: absolute on the play icon only works for positioned elements.

Absolute position: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

MDN

 .video-item { display: flex; padding-left: 5px; } .video-item-details { padding-left: 10px; } .video-item-tag { background: #2196F3; padding: 2px 10px 2px 10px; float: left; margin: 2px; margin-bottom: 5px; border-radius: 100px; color: white; font-family: monospace; font-size: 8pt; position: relative; cursor: pointer; text-align: center; } .video-item-playicon { position: absolute; width: 60px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer: center; } .video-item-img { /*<------- added */ width: fit-content; /*<------- added */ position: relative; /*<------- added */ }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="video-list-stacked"> <ul class='list-group video-list-container'> <li id="some-guid-01" class="list-group-item video-item"> <div class=video-item-img> <img src="https://via.placeholder.com/140x100" /> <img class="video-item-playicon" src="https://images.vexels.com/media/users/3/131784/isolated/preview/a9ff82db0cf438516e13b8c3bf918a00-play-flat-icon-by-vexels.png"> </div> <div class="video-item-details"> <h4>Video Title 1</h4> <div>Description for Video Title 1. A little description that elaborates what this is. The description should take not more than two lines.</div> <span class="video-item-tag">Tag One</span> <span class="video-item-tag">Some other tag</span> <span class="video-item-tag">Some other tag</span> <span class="video-item-tag">Some other tag</span> <span class="video-item-tag">Some other tag</span> </div> </li> </div>

Answer 2

I only added this code to your css and that is working fine:

 .video-item-img { position: relative; }

Also I think you have a mistake in your CSS:

 .video-item-playicon { cursor: pointer; /* not pointer:center */ }