如何在一条线上垂直居中一个圆? [英] How do I vertically center a circle on a line?

问题描述

我试图在水平线的中间垂直居中一个圆，但使用负边距似乎不起作用.我应该如何处理这个问题?

#line {宽度:100%；/* 2 */高度:5px；背景:灰色；}#圆圈 {高度:50px；宽度:50px；边界半径:50%；背景:蓝色；左边距:50%；文本对齐:居中；白颜色;字体粗细:700；行高:50px；字体大小:14px；}

<div id="Value">0.33</div><div id="结果"></div><div id="行"><div id="圆圈">2

解决方案

使用绝对定位和 transform.

#line {宽度:100%；高度:5px；背景:灰色；位置:相对；}#圆圈 {高度:50px；宽度:50px；边界半径:50%；背景:蓝色；文本对齐:居中；白颜色;字体粗细:700；行高:50px；字体大小:14px；位置:绝对；顶部:50%；左:50%；变换:翻译(-50%，-50%)；}

<div id="Value">0.33</div><div id="结果"></div><div id="行"><div id="圆圈">2

I'm trying to center a circle vertically in the middle of a horizontal line, but using a negative margin doesn't seem to work. How should I approach this?

#line {
  width: 100%;
  /* 2 */
  height: 5px;
  background: gray;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  margin-left: 50%;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
}

<div id="Value">0.33</div>
<div id="Result"></div>


<div id="line">
  <div id="circle">
    2
  </div>
</div>

解决方案

Use absolute positioning and a transform.

#line {
  width: 100%;
  height: 5px;
  background: gray;
  position: relative;
}

#circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
  text-align: center;
  color: white;
  font-weight: 700;
  line-height: 50px;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="Value">0.33</div>
<div id="Result"></div>


<div id="line">
  <div id="circle">
    2
  </div>
</div>

这篇关于如何在一条线上垂直居中一个圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！