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

Question

我正在尝试创建一个位于购物车图标顶部的徽章，其中包含购物车中的商品数量。

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

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

Answer 1

您需要使用行内 block 显示才能调整元素的大小。并最终以 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;
}

<div class="bla">0</div>