以div爲圓心的大文字背景圖像

我有一個圖像顯示帶圓圈背景圖像的特殊div。在這個div中它顯示了一堆文本。但由於背景是圓形的，所以我希望文本被排成一個相同大小的圓。有沒有辦法做到這一點？以div爲圓心的大文字背景圖像

基本上我想要的是將大段文字對齊成一個圓。就像這樣，但是文字更大。

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

到目前爲止已經我已經嘗試過的唯一的事，但有一個更大的文本不會再中心。

來源

2014-03-03 user2988642

我們沒有足夠的信息。我們需要看到涉及的HTML和CSS。 –

請發佈您迄今爲止嘗試使用的代碼。 –

[circle \ [CSS \]中文字的段落]（http://stackoverflow.com/questions/16982545/paragraph-of-text-in-circle-css） –

在div中設置圖像和文本，使用z-index與邊距重疊文本，並使用邊框半徑爲25來製作圓圈圖像。現在檢查

<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>

這裏是你的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;  
}

檢查這裏 http://jsfiddle.net/danield770/rbCrQ/4/

來源

2014-03-03 13:29:26

以div爲圓心的大文字背景圖像

回答

相關問題