带有border-radius的div中心文本

Question

我想在只有一个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;
}

有任何想法吗？

Answer 1

它可以简单地通过设置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>