Bootstrap导致我的css圆是一个椭圆形?

egdjgwm8  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(2)|浏览(180)

出于某种原因,我的一些圆圈与字体真棒图标成为一个椭圆与引导。如果我删除填充它使他们都完美的圆圈,但然后圆圈太小了。我怎样才能使这些与填充我想要的,但仍然是一个圆圈?

.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

57hvy0tb

57hvy0tb1#

去除衬垫,增加宽度和高度,并使用lineheight进行垂直居中
https://jsfiddle.net/jx37v7nj/6/

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

evrscar22#

我遇到了同样的问题,并通过用div容器包围圆的html容器来解决它。像这样:

<div>
 <div class="circle"></div>
</div>

CSS部分是这样的:

.circle {
  height: $sizeIconItem;
  width: $sizeIconItem;
  border-radius: 50%;
}

相关问题