Using Border-Radius to Create Circle Behind Text

[toad78]

I’m trying to add a circle behind some slider text but I cannot get the circle to be centered with the text. You can see it here–scroll down to ‘Find Your Industry’.

I’m using:
.tp-parallax-wrap {
background: red none repeat scroll 0 0;
border-radius: 50%;
height: 250px;
width: 250px;
}

but the top of the circle is at the top of the text.
Suggestion?

[bmorgan]

Hey toad78, you have an absolutely positioned div called tp-loop-wrap. If you add 50px left and 100px top to the absolute statement the text becomes centered. Hope this helps.

[SamA74]

You can centre the text using display: table-cell with vertical-align: middle and text-align: center.
Or display: flex with align-items: center

[SamA74]

One other thing, because I’ve seen you do the same in another topic.

background: red none repeat scroll 0 0;

When you use a plain colour in a background, you don’t need to set repeat, scroll etc. Just state the colour.

[ronpat]

I’ve been playing with this for awhile and getting nowhere because I cannot test the HTML and CSS that is dynamically inserted by JavaScript.

My impression is that you have too many positioned items and the HTML for the text and circle are illogical because the text is within the red ball’s box and both are {position:absolute} (they should probably both be position abs, but…). They need to be relative to the same object, ie. .fullwidthabanner, that has {position:relative}. I’m suggesting that the text should be moved outside of the circle box, perhaps in parallel with it. Then perhaps

.tp-parallax-wrap,
.tp-mask-wrap {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

will center both the text and the red ball.

This is just a wild, untested guess, and I may have identified the wrong selectors, but I believe the logic is sound. (My track record of late for untested suggestions is not so hot.)

<rant>
I disagree with the practice of using JavaScript to create non-dynamic content or supplement dynamic content with non-dynamic inline-properties. The page is less functional when JS is disabled (not to mention hard to troubleshoot).
</rant>

[toad78]

Thanks, SamA74. It was purely for this forum post and was going to get cleaned up afterwards.

[toad78]

That seems to have worked very well.