Bootstrap4.4.1下图片播放覆盖图标错误居中到列表项如何修复

解决方案 #

核心逻辑 #

设置了position: absolute的元素，会基于最近一层position属性不为static的祖先元素计算偏移坐标。播放图标父容器.video-item-img未设置定位属性，因此图标偏移参照了更外层的元素，导致在整个list-group-item内居中。

修改代码 #

只需要在现有CSS中新增.video-item-img的定位规则，同时修正播放图标的属性错误即可：

/* 新增父容器相对定位规则 */
.video-item-img {
  position: relative;
  display: inline-flex;
}

.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%);
  cursor: pointer; /* 修正原错误属性pointer: center */
}

修改后播放图标会以左侧图片容器为参照居中，不会再偏移到整个列表项的中心位置。

内容的提问来源于stack exchange，提问作者CMorgan