Question

出于某种原因，我的一些带有字体真棒图标的圈子变成带有引导程序的椭圆形。如果我删除填充，它会使它们成为完美的圆圈，但是圆圈太小了。如何用我想要的填充物制作这些填充物，但保持为圆形？

.icon-circle{
    display: table-cell;
    padding: 30px;
    font-size:2.5em!important;
    background:#666;
    background: #3498DB;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);
    -webkit-border-radius:1100%;
    -moz-border-radius:100%;
    -o-border-radius:100%;
    border-radius:100%;
    border:6px solid #fff;
    color:#FFF;
    text-align:center;
    vertical-align:middle;
    width:60px;
    height:60px;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

JSFIDDLE

Answer 1

去除衬垫，增加宽度和宽度高度并使用lineheight进行垂直居中

https://jsfiddle.net/jx37v7nj/6/

.icon-circle{
    display:inline-block
    padding: 0;
    line-height: 80px
    width: 80px
    height: 80px
}

Bootstrap导致我的CSS圈变为椭圆形？

1 个答案: