jquery - 将 div 置于另一个带有图像的 div 中

Question

我有这样的结构:HTML:

<div class="wrapper">
  <img src="image.jpg" />
  <div class="circle">
    X
  </div>
</div>

CSS:

.circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background: #FF0000;
}

我想将带有类圆的 div 准确地放在给定图像上的 div“包装器”的中心。是否可以仅在 css 中执行此操作？如果没有，解决方案可以使用 jQuery。

我有很多不同大小的 div。

Answer 1

只需绝对定位 div 并将其放在中心即可。只要值是硬编码的，只需将其插入中心即可。确保将 position: relative 添加到包装器中，以便圆圈绝对定位在包装器内，而不是树中它上方的 div。

CSS:

.wrapper {
    /* other vals */
    position: relative;
}

.circle {
    /* other vals */
    position: absolute;
    left: /* (width of wrapper - width of circle)/2 */
    top: /* (height of wrapper - height of circle)/2 */
}