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

【问题标题】：how to add a circle at the top middle of tab in html?如何在html标签的顶部中间添加一个圆圈？
【发布时间】：2017-06-08 17:51:31
【问题描述】：

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

我用 css 创建了一个圆圈

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

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

【问题讨论】：

尝试将 .bubble_circle 元素定位到绝对 --- .bubble_circle{position:absolute;}
请使用小提琴或其他东西创建一个现场演示。我们很容易理解您的问题。
我已尝试使用 {position :absolute} 但气泡未根据标签大小在中心对齐@chandra shekhar
将 .bubble_circle 的父元素设置为 position:relative 并设置 .bubble_circle position:absolute 试试

标签： html css angularjs

【解决方案1】：

使用position 得到相同的结果

下面是一个例子

.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;
}

<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>

【讨论】：

如果选项卡的数量更多并且选项卡的大小会根据选项卡中的内容自动增加或减少，那么气泡位置会发生变化。
不，它保持在中心顶部，您可以使用标签高度播放
我认为这对我有帮助。谢谢你。 @LKG

【解决方案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>

【讨论】：

【解决方案3】：

希望对你有帮助

* {
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;
}

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

【讨论】：