You just set the circles’ position to relative , the inner p aragraphs’ position to absolute , and the paragraphs’ width to 100% (of a circle). The result looks like this:

(In the source code; the lines I changed are marked with <=== in the CSS tab)

I added horizontal lines in the screenshot to illustrate two problems:

the text in circles with a thicker border (“Daniel”) is two pixels higher than in the other circles (“Mom”) Multiline paragraphs are aligned by their first line (which can get ugly if you have more than two lines)

Both problems are due to the fact that your paragraphs have a fixed distance from the top edge of the circle: with a thicker border, that edge is further away from the circle’s center point, which causes problem #1.

The better approach is to use the technique described in this excellent article on vertically centered multiline text. Here’s the result of applying this technique to your example (again my CSS changes are highlighted by <=== ).

As you see, while the text is beautifully centered, the display:table property on the circles makes them appear below each other (like tables do). I couldn’t think of an easy way to fix that other than wrapping every circle in an additional <div> , and aligning those wrapper <div> s. This makes the HTML more nested:

<div class="wrapper"> <div class="family"> <p>Mom</p> </div> </div>

but the alignment now works like a charm!

Note that to avoid issues with unequal border width, I set the box-sizing property to border-box – this makes the border “grow inward“ with respect to the height and width , not outward. Try removing that property to see that it breaks the circles’ alignment.

By the way, your question title…

Why can’t I align EVERYTHING?!

reminds me of this:

click the image to see where this meme originated.