Warum ist mein Abzeichen oval?

Question

Ich versuche ein Badge zu erstellen, das auf meinem Einkaufswagensymbol steht und die Anzahl der Artikel im Warenkorb enthält.

Aus irgendeinem Grund ist das Abzeichen oval anstatt eines Kreises. Was mache ich falsch?

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

Sie müssen die Inline-Block-Anzeige verwenden, um Ihr Element zu skalieren. und schließlich line-height den Text zum Zentrum:

.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

Es ist wegen seines Inhalts. Aufgrund der Schriftgröße wird das Abzeichen oval dargestellt. Stellen Sie die Schriftgröße auf 0em und es wird ein schöner Kreis sein.

Answer 3

display: inline rendert das Element als Inline, daher ist die Breite vom Inhalt abhängig. Wechseln Sie zu inline-block, wenn Sie die Breite angeben möchten.

Answer 4

Ihre Anzeige auf Inline festgelegt ist, welche die div bedeutet nicht die Eigenschaften haben es muss in der Lage, die Breite zu beeinflussen und die Höhe. Stellen Sie die Anzeige auf Inline-Block ein, wodurch ein Kreis entsteht. Wenn Sie Ihren Text vertikal zentrieren möchten, legen Sie die Zeilenhöhe auf die Höhe fest, also in Ihrem Fall 36 Pixel.