请看一下
我要做的是获得带有居中图标的css3圆圈(水平和垂直)。我做错了什么?
http://screencast.com/t/bpxIefbf
如你所见,信封留在左侧,手机也是如此。换句话说,图标的位置不在中心。
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>
答案 0 :(得分:1)
[class^="icon-"], [class*=" icon-"] {line-height: 20px}
这样可行。
答案 1 :(得分:1)
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
}