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

egdjgwm8 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(2)|浏览(182)

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

.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

twitter-bootstrap

来源：https://stackoverflow.com/questions/31197042/bootstrap-causing-my-css-circle-to-be-an-oval

2条答案

按热度按时间

57hvy0tb1#

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

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

赞(0）回复(0）举报 2023-06-20

evrscar22#

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

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

CSS部分是这样的：

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

赞(0）回复(0）举报 2023-06-20

我来回答

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

2条答案

相关问题

热门标签

最新问答