Html 居中的内部文本和我的圆圈内的文本

编辑：我已经设法将文本居中放置在外圆上，但主文本仍有问题。

primary industry…

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

我有一堆圆被动态渲染

我试图让

第一产业…

文本成为所有圈子的中心

下面是它的实际外观

我试图在codepen中复制这种行为，但布局有点不协调

我的真实代码如下所示

const CircleMenu = ({ question }) => {
  

  const graph = useRef(null)

  useEffect(() => {
    const circlegraph = graph.current
    const circleElements = circlegraph.childNodes // not an array

    let angle = 360 - 90
    let dangle = 360 / circleElements.length

    for (let i = 0; i < circleElements.length; i++) {
      let circle = circleElements[i]
      angle += dangle
      circle.style.transform = `rotate(${angle}deg) translate(${circlegraph.clientWidth /
        2}px) rotate(-${angle}deg)`
    }
  }, [])

  return (
    <Container>
      <CenterText>{question.primaryCircle.text}</CenterText>
      <CircleContainer>
        <div className="circlegraph" ref={graph}>
          {question.choices.map(item => (
            <div className="circle" key={item.id}>
              <p>{item.text}</p>
            </div>
          ))}
        </div>
      </CircleContainer>
    </Container>
  )
}

const CenterText = styled.p`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
`

const CircleContainer = styled.div`
  .circlegraph {
    position: relative;
    width: 500px;
    height: 500px;
    margin: calc(100px / 2 + 0px);
  }

  .circlegraph:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* border: 2px solid teal; */
    width: calc(100% - 2px * 2);
    height: calc(100% - 2px * 2);
    border-radius: 50%;
  }

  .circlegraph .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: calc(-100px / 2);
    background: teal;
    border-radius: 50%;
  }

const CircleMenu=（{question}）=>{
常量图=useRef（空）
useffect（（）=>{
const circlegraph=graph.current
const circleElements=circlegraph.childNodes//不是数组
让角度=360-90
让悬挂=360/圈元素。长度
for（设i=0；i(
{item.text}

))}
)
}
const CenterText=styled.p`
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
`
const Container=styled.div`
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：800px；
`
const CircleContainer=styled.div`
.圆图{
位置：相对位置；
宽度：500px；
高度：500px；
保证金：计算（100px/2+0px）；
}
.圆环图：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
/*边框：2件实心青色*/
宽度：计算（100%-2px*2）；
高度：计算（100%-2px*2）；
边界半径：50%；
}
.圆圈图.圆圈{
位置：绝对位置；
最高：50%；
左：50%；
宽度：100px；
高度：100px；
保证金：计算（-100px/2）；
背景：水鸭；
边界半径：50%；
}

---

`

只需对圆使用flex属性即可轻松对齐。例如：

.ciclegraph .circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

至于

h1

，它当前与应用程序相关，而不是与圆圈的容器相关。您可以更改HTML结构，将

h1

放入该容器中，但如果希望保留该结构，也可以在之后添加pseudo-如果这样做，只需删除

h1

。如果这是为了搜索引擎优化的目的，我不推荐后者。但是你应该明白

.ciclegraph:after {
  content: "SOME BASIC TEXT";
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

---

代码沙盒：

谢谢，非常感谢：）