私のバッジはなぜ楕円ですか？

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

要素のサイズを変更するには、インラインブロック表示を使用する必要があります。そして最終的に行の高さは、テキストを中央に：

.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>

Answer 2

それは、そのコンテンツのです。 font-sizeのため、バッジは楕円形になります。フォントサイズを0emに設定すると素晴らしいサークルになります。

Answer 3

display: inlineは要素をインラインでレンダリングするため、幅はコンテンツに依存します。幅を指定する場合はinline-blockに変更してください。

Answer 4

お使いのディスプレイは、それが幅に影響を与えることができる必要がある性質を持っていないのdivを意味インラインに設定されており、高さ。表示をインラインブロックに設定すると、円が描かれます。テキストを縦方向にセンタリングする場合は、行の高さを高さと同じに設定します。したがって、場合によっては36pxに設定します。