Centering inner text, and text inside my circles

Question

Edit: I have managed to centered the text for outer circles using, but still having trouble with the main text primary industry...

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

I have a bunch of circles being dynamically rendered.

I'm trying to get primary industry ... text to be centered of all the circles

Here's how it actually looks

I've tried to replicate the behaviour in codepen but the layout is slightly off

https://codesandbox.io/embed/circles-88tzy?fontsize=14&hidenavigation=1&theme=dark

My real code looks like this

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

`

score 2 · Accepted Answer · answered Jul 22 '20 at 22:38

Simply use flex properties for your circles to align them with ease. Example:

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

As for the h1 it is currently relative to the App and not the circles' container. You can alter your HTML structure to put the h1 in that container but you can also just add pseudo after if you wish to retain the structure - if you do so, just remove the h1. If this is for SEO purposes, I do not recommend the latter. But you should get the idea.

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

CodeSandBox: https://codesandbox.io/s/circles-3eq19?file=/src/styles.css

Centering inner text, and text inside my circles

1 Answers1