作者:踏山321 | 来源:互联网 | 2023-05-21 14:55
我想在只有一个div的垂直和水平中心文本中使用border-radius制作一个环绕圆圈.目前文字显示在右下角......
看这里的小提琴:http://jsfiddle.net/gvoyu830/
我的css:
DIV {
display: inline-block;
width: 10%;
border: 1.2em solid #dddddd;
border-radius: 50%;
max-width: 1.2em;
max-height: 1.2em;
box-sizing: border-box;
margin: 0 auto;
}
有任何想法吗?
1> Hashem Qolam..:
它可以简单地通过设置height
/ width
和div 来实现,line-height
其等于height
垂直对齐的顺序.
text-align: center
将进行水平对齐.
div {
display: inline-block;
text-align: center;
/* width: 10%; */
/* border: 1.2em solid #dddddd; */
background-color: #ddd;
width: 2.4em;
height: 2.4em;
line-height: 2.4em;
border-radius: 50%;
/* max-width: 1.2em; */
/* max-height: 1.2em; */
/* box-sizing: border-box; */
/* margin: 0 auto; */
}
1
2
3
4
5