Question

我在标签的顶部中间设计了一个圆圈，但我的标签会根据我使用md-tab创建标签的内容自动增加

我用css

创建了一个圆圈

.bubble_circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 15px;
    }

请帮我解决这个问题。有一天，我试图在选项卡的顶部中间设置圆圈，但我可以这样做。

Answer 1

使用position获取相同的

下面是一个例子

＆＃13;

.tab {
  width: 100%;
  height: auto; /* You can update it as your need */
  background: tomato;
  position: relative;
  padding:5px;
}

.bubble_circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 15px;
  position: absolute;
  background: black;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  /* z-index: value; if need and change as your need */
}

.bubble_circle + p {
  padding-top:15px;
}

＆＃13;

<div class="tab">
  <div class="bubble_circle"></div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima eaque quae incidunt ab, dolorum perspiciatis odit eius. Non assumenda doloremque in animi, laboriosam quibusdam nulla modi aspernatur sit enim voluptatum.
  </p>
</div>

＆＃13;

Answer 2

您也可以使用flexbox轻松解决此问题。使用标签页上的display: flex;和justify-content: center;将儿童气泡置于标签顶部。不需要职位等。

.tab {
  width: 100%;
  height: 50px;
  background: grey;
  display: flex;
  flex-direction: column;
}

.centered {
  display: flex;
  justify-content: center;
}

.bubble_circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 15px;
  background-color: white;
}

<div class="tab">
  <div class="centered">
      <div class="bubble_circle"></div>
  </div>
  <div class="centered ">
      <p>Tab</p>
  </div>
</div>

Answer 3

希望这有帮助

＆＃13;

* {
padding: 0;
margin: 0;
}

.tab {
background-color: lightgray;
border-left: thin solid darkgray;
border-right: thin solid darkgray;
border-top: thin solid darkgray;
border-radius: 5px;
display: inline-block;
padding-top: 1em;
position: relative;
}
.bubble-circle {
position: absolute;
top: 1px;
left: 50%;
transform: translate(-50%, 0);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}

＆＃13;

<div class='tab'>
<div class='bubble-circle'></div>
<p>Tab 1</p>
</div>

＆＃13;

如何在html中的标签顶部中间添加一个圆圈？

3 个答案: