中心水平和垂直CSS3圈内

我试图做的是获得与中心图标CSS3圈（包括：水平和VERT）。我究竟做错了什么？

正如你看到的，包络保持在左侧，电话太多。换句话说，图标的位置不在中心。

CSS

.circle { 
    color: #fbfbfb; 
    width: 20px; 
    height: 20px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background-color: #b0b8c2; 
    font-size: 11px; 
    font-weight: 200; 
    color: #d9dfe6; 
    text-align: center; 
    cursor: pointer; 
    line-height: 19px; 
    margin: 0 10px 0 0; 
    float:left; 

}

HTML

<div class="circle"> 
     <i class="icon-facebook"></i> 
    </div> 
    <div class="circle"> 
     <i class="icon-twitter"></i> 
    </div> 
      <div class="circle"> 
          <i class="icon-phone"></i> 
         </div> 

         <div class="circle"> 
          <i class="icon-envelope"></i> 
         </div>

来源

2013-08-31 heron

[class^="icon-"], [class*=" icon-"] {line-height: 20px}

这将工作。

来源

2013-08-31 03:07:39 Yuguo

更新的jsfiddle请 – heron

http://jsfiddle.net/T7cVg/6/做 – Yuguo

http://jsfiddle.net/T7cVg/7/不集中？ – heron

http://jsfiddle.net/T7cVg/8/这个怎么样？我已经更新了jsfiddle。这会为你工作吗？

.circle { 
    color: #fbfbfb; 
    width: auto; 
    height: auto; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background-color: #b0b8c2; 
    font-size: 11px; 
    font-weight: 200; 
    color: #d9dfe6; 
    text-align: center; 
    cursor: pointer; 
    line-height: normal; 
    margin: 0 10px 0 0; 
    float:left; 
    padding:1em 2%; 
} 

.circle [class^="icon-"], 
.circle [class*=" icon-"] { 
    line-height: normal 
}

来源

2013-08-31 08:33:07

中心水平和垂直CSS3圈内

回答

相关问题