帶有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> 

Answer 2

http://jsfiddle.net/gvoyu830/1/ Center in a circle

我是為你做的，但只是相對位置。 （否則，文本對齊：中心;不要行事，因為你的字符串的開頭是數字的左邊）

Answer 3

的jsfiddle

加

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;

}

Answer 4

真的很想貢獻。 這就是我所擁有的：

DIV {
    display:inline-block;
    width: 10%;
    border: 1.5em solid #dddddd;
    border-radius: 50%;
    max-width: 1.15em;
    max-height: 1.15em;
    margin: 0 auto;
    text-align:center;
}

在這里小提琴

更新 :(背景與邊框顏色相同） JsFiddle