我将如何做出“是!!!”以下代码中的文本显示在圆圈的中心?
我试过添加内边距,但它只是将文本向右移动,也就是说,内边距没有在所有方向上均匀应用。
这是我的代码(http://jsfiddle.net/yxVkk/646/)
HTML:-
<div id="big-circle" class="circle big">
<div class="circle one"><span style="top: -50px;">YES!!!</span></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
CSS:-
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
position: absolute;
}
.circle.big {
width: 150px;
height: 150px;
background-color: blue;
margin: 100px;
}
.one {
left: -100px;
top: -100px;
}
.two {
top: -60px;
left: 50px;
}
.three {
right: -25px;
top: -25px;
}
.four {
left: -25px;
bottom: -25px;
}
.five {
bottom: -60px;
left: 50px;
}
.six {
right: -25px;
bottom: -25px;
}
注意:我更愿意在没有 JS 的情况下完成此操作,如上例所示。
最佳答案
删除 style="top: -50px;"
并添加
.one>span{
display:block;
width: 100%;
line-height:20px;
font-size: 20px;
margin-top: 40px;
text-align:center
}
fiddle :http://jsfiddle.net/yxVkk/648/
关于css - 带文字的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24519525/