为什么我的徽章是椭圆形的？

我正在尝试创建一个位于购物车图标顶部的徽章，并在购物车中包含物品数量。为什么我的徽章是椭圆形的？

由于某种原因，徽章是椭圆形而不是圆形。我究竟做错了什么？

const cartStyle = { 
    width: "48px", 
    height: "48px", 
    verticalAlign: "middle", 
    float: "right", 
    marginBottom: "0", 
    backgroundImage: `url(${ShoppingCart})` 
}; 

const badgeStyle = { 
    content: "0", 
    background: "white", 
    display: "inline", 
    position: "relative", 
    borderRadius: "50%", 
    width: "36px", 
    height: "36px", 
    padding: "8px", 
    left: "15px", 
    border: "2px solid #666", 
    color: "#666", 
    textAlign: "center" 
} 

class Cart extends Component { 
    render() { 
     return(
      <div className="cart" style={cartStyle}> 
       <div style={badgeStyle} > { this.props.cartProducts.length } </div> 
      </div> 
     ); 
    } 
}

https://codepen.io/stoerebink/pen/QvjYpo

来源

2017-04-18 stoerebink

您正在''显示：inline'到'div'，它不影响高度和宽度。 – Vucko

使用'display：inline-block; “它会工作。检查工作示例：https://codepen.io/anon/pen/mmevXK –

您需要使用内嵌块显示来调整元素的大小。最终的line-height居中文字：

.bla { 
 
    background: white; 
 
        display: inline-block; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    width: 36px; 
 
    height: 36px; 
 
        line-height:36px; 
 
    padding: 8px; 
 
    left: 15px; 
 
    border: 2px solid black; 
 
    color: black; 
 
    text-align: center; 
 
}