html css小圆圈,html – 带有border-radius的css中的完美圆圈不起作用

这是一个JSfiddle,有一些变化：

JSFiddle for round badge

主要变化是：

padding: 0px;

width: 50px;

height: 50px;

line-height: 50px;

行高等于容器高度将使文本垂直居中.这仅适用于文本适合单行的情况.

编辑:(从JSFiddle复制的代码)

.badge {

display: inline-block;

padding: 0;

width: 50px;

height: 50px;

line-height: 50px;

font-size: 12px;

font-weight: lighter !important;

color: #fff !important;

text-align: center;

white-space: nowrap;

vertical-align: baseline;

background-color: #d73d33;

border-radius:50px;

position: relative;

top: -3px;

}

8