Center large text in div with circle background-image

Question

I have an imagemap that shows a particular div with a circled background-image. In this div it shows a bunch of text. But since the background is circular, i'd like the text to be aligned as a circle of the same size. Is there a way of doing this?

Basically what I want is to align a large piece of text in a circle. Something like this, but with a bigger text.

http://jsfiddle.net/danield770/rbCrQ/4/

#ff{    
width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    text-align:center;
    line-height:80px;
}
span
{
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
}

So far that has been the only thing i've tried, but with a bigger text it doesn't center anymore.

We don't have enough information. We would need to see the HTML & CSS involved. — Paulie_D, Mar 03 '14 at 12:17
possible duplicate of [Paragraph of text in circle \[CSS\]](http://stackoverflow.com/questions/16982545/paragraph-of-text-in-circle-css) — web-tiki, Mar 03 '14 at 14:00

score 0 · Answer 1 · answered Mar 03 '14 at 13:29

set both image and text inside the div,use z-index to overlap text with margins, and use border radius of 25 to make circled image. check now

<div id="ff"><span>hello how</span></div>


<div id="ff"><img src="http://3.bp.blogspot.com/-lA3XImmNJ20/T3XKEZF7-xI/AAAAAAAAD1c/95qI6uPNMVM/s320/square-tree-trunk.jpg" height="60" /><span id="span2"> text over the div</span></div>

here is your css

#ff{    
width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    text-align:center;
    line-height:80px;
}
img
{
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
    border-radius:25px;
}
#span2 {
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
    margin-top:-150px;
    z-index:5px;    
}

check here http://jsfiddle.net/danield770/rbCrQ/4/

Center large text in div with circle background-image

1 Answers1