在其中使用div而不使用margin auto

Question

尝试文本对齐中心和边距自动,两者都不起作用,我不想习惯使用'边缘黑客'进行居中.

http://jsfiddle.net/st9AM/1/

.circle{

float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}

.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}

Answer 1

首先,使用margin: auto;是不是黑客攻击

要将圆圈置于圆圈中心,您可以使用定位技术,例如position: absolute;.在这里,我使用position: absolute;的内圆,比调幅分配top和left具有值的属性50%,并比现在用margin-top和margin-left和扣除的1/2 height和width.

为什么要扣除32px？正如我已经说过我正好在扣除总额的一半width,并height因此这也包括border被设置为你的元素2px,这使得你的元素64px中height,并width分别.

要vertical-align的+符号,现在用的line-height财产,我只能看到单个字符垂直对齐(你没有说,但在技术上我可以假设你在找什么形状的),或者你也可以使用vertical-align: middle;,但你需要设置容器元素来display: table-cell;

演示

最后但并非最不重要,您应该将span标记嵌套在内部圆圈内div.

.circle{
   float: left;
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   border: 2px solid #DDD;
}

.inner{
   text-align: center;
   line-height: 60px;
   position: absolute;
   top: 50%;
   margin-top: -31px;
   left: 50%;
   margin-left: -31px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 2px solid #DDD;
}