爲什麼我的徽章是橢圓形的？

我正在嘗試創建一個位於購物車圖標頂部的徽章，並在購物車中包含物品數量。爲什麼我的徽章是橢圓形的？

由於某種原因，徽章是橢圓形而不是圓形。我究竟做錯了什麼？

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; 
 
}