带有border-radius的div中心文本

时间:2015-02-18 09:27:49

标签: html css css3 vertical-alignment

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

有什么想法吗?

4 个答案:

答案 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)

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;

}

答案 3 :(得分:1)

真的想贡献。这就是我所拥有的:

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;
}

小提琴 Here

更新 :(背景与边框颜色相同) JsFiddle