Question

我有一张使用自举程序创建的卡片，我需要找到一种在卡片顶部插入圆圈的方法。

我的代码：（JSFiddle中的演示）

<style>
        .numberCircle {
            width: 39.6px;
            height: 39.6px;
            border-radius: 50%;
            text-align: center;
            font-size: 21.6px;
            border: 2px solid #3498db;
            color:white;
            background:#3498db;

        }
</style>

<body style="margin:20px; padding:20px;">
    <div class="card" style="width: 18rem;">
        <div class="card-body" style="text-align:center">
          <div class="numberCircle">30</div>
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick card description...</p>
          <a href="#" class="card-link">Card link</a>
        </div>
     </div>

这是我期望的结果：

我该怎么做？

Answer 1

您可能想签出position CSS属性。它允许您将元素放置在所需的任何位置，可能是相对于页面还是其父元素。

这是更新的CSS：

.card-body {
    position: relative;
}

.numberCircle {
    width: 39.6px;
    height: 39.6px;
    border-radius: 50%;
    text-align: center;
    font-size: 21.6px;
    border: 2px solid #3498db;
    color: white;
    background: #3498db;
    position: absolute;
    margin: auto;
    top: -20px;
    right: 0;
    left: 0;
}

Answer 2

您可以通过在圆圈上使用transform来执行此操作。还要注意，我将您的px值更改为整数，不能有逗号像素值。这些值无论如何都是无效的。

.numberCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  font-size: 22px;
  border: 2px solid #3498db;
  color:white;
  background:#3498db;
  margin: 0 auto;
  z-index: 1;
  transform: translateY(-50%);
  line-height: 40px;
}

.card {
  border: 1px solid green;
  }

    <div class="card" style="width: 18rem;">
        <div class="card-body" style="text-align:center">
          <div class="numberCircle">30</div>
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick card description...</p>
          <a href="#" class="card-link">Card link</a>
        </div>
     </div>

Answer 3

您必须将圆设置为position:absolute;，以便可以将其设置在顶部和中间。对于左侧位置，您可以使用calc()。

.numberCircle {
       position:absolute;
        top:-20px;/* half of his height */
        left:calc(50% - 20px);/*50% - half of his length*/
        width: 39.6px;
        height: 39.6px;
        border-radius: 50%;
        text-align: center;
        font-size: 21.6px;
        border: 2px solid #3498db;
        color:white;
        background:#3498db;

    }

这是fiddle

Answer 4

我在卡的圆和位置上使用绝对值。

我分叉了你的小提琴： https://jsfiddle.net/Lgr5anuf/

.numberCircle {
    width: 39.6px;
    height: 39.6px;
    border-radius: 50%;
    text-align: center;
    font-size: 21.6px;
    border: 2px solid #3498db;
    color:white;
    background:#3498db;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%)
}
        
.card-body {
  position:relative;
  padding-top: 30px;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body style="margin:20px; padding:20px;">
    <div class="card" style="width: 18rem;">
        <div class="card-body" style="text-align:center">
                <div class="numberCircle">30</div>
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick card description...</p>
          <a href="#" class="card-link">Card link</a>
        </div>
      </div>
</body>

Answer 5

我认为这应该有所帮助，将其放在您的CSS中。

left: 50%;
top: -Any number;

如何在div顶部中间插入一个浮动圆？

5 个答案: