Question

将我的大问题分解为这个简单的陈述，我在一个带红色边框的框内有一个蓝色圆圈。

如何将圆圈保持在中心但让它重叠在盒子边框的顶部水平线上？

我的尝试似乎达到了最终结果：https://jsfiddle.net/pgcft3z7/1/

HTML：

<div class="container">
  <div class="circle">
    Circle Text Here
  </div>
</div>

CSS：

.circle {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  background: blue;
  position:absolute;
  top: -5px;
  left: 200px;
}

.container {
  margin-top: 40px;
  border: solid 1px;
  border-color: red;
}

这涉及到我需要手动指定left和top，这似乎不会保持居中或反应灵敏。

目前的示例：

https://jsfiddle.net/pgcft3z7/

Answer 1

这是JSFiddle。

＆＃13;

.circle {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  background: blue;
  position: relative;
}
.border {
  border: solid 1px;
  border-color: red;
  width: 100%;
  height: 70px;
  top: 30px;
  position: absolute;
}
.container {
  margin-top: 40px;
  position: relative;
}

＆＃13;

<div class="container">
  <div class="border">

  </div>
  <div class="circle">
    Circle Text Here
  </div>
</div>

＆＃13;

Answer 2

＆＃13;

.line{
  position:relative;        /* in order to contain inner absolute circle pos */
  margin-top:50px;
  background:red;
  height:0;
  border:1px solid red;
}
.circle{
  position: absolute;
  width:40px; height:40px;
  top:50%;    left:50%;                /* 50% of parent */
  transform: translate(-50%, -50%);    /* -50% of self */
  
  background:blue;
  border-radius:50%;
}

＆＃13;

<div class="line">
  <div class="circle"></div>
</div>

＆＃13;

Answer 3

只需将这些添加到您的圈子类：

  position: relative;
  top: -20px;

Answer 4

看看这个https://jsfiddle.net/pgcft3z7/7/

<div class="container">
  <div class="circle">
    Circle Text Here
  </div>
</div>

{{1}}

使用CSS将圆移动到边框顶部

4 个答案: