我想在一个div中使用垂直和水平中心文本,这个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;
}
有什么想法吗?
答案 0 :(得分:11)
只需设置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; */
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
答案 1 :(得分:1)
http://jsfiddle.net/gvoyu830/1/ Center in a circle
我是为你做的,但只是相对位置。 (否则,文本对齐:中心;不要直接工作,因为你的字符串的开头是数字的左边)
答案 2 :(得分:1)
添加
text-align:center;
display: table-cell;
vertical-align: middle;
示例:
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;
text-align:center;
display: table-cell;
vertical-align: middle;
}
答案 3 :(得分:1)