Question

我有一个图像地图，显示带有圆圈背景图像的特定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;
}

到目前为止，这是我尝试过的唯一一件事，但是如果文字更大，它就不再是中心了。

Answer 1

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

在div的中心大文本与圈子背景图象

1 个答案: