Lösung für die horizontale Zentrierung des von QRCode.js generierten QR-Codes

Ich verwende die Bibliothek qrcode.js, um einen QR-Code zu generieren, und hoffe, dass der generierte QR-Code in seinem Container zentriert werden kann.

Hier ist ein einfaches Beispiel, das zeigt, wie man mit qrcode.js einen QR-Code generiert und ihn per CSS zentriert:

HTML Quelltext

<div id="qrcode-container">
  <div id="qrcode"></div>
</div>

JavaScript-Code (mit qrcode.js):

const qrcode = new QRCode(document.getElementById("qrcode"), {
    
    
  text: "https://www.example.com",
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});

CSS-Code

#qrcode-container {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 可以调整为你需要的高度 */
}

In diesem Beispiel verwenden wir das Flexbox-Layout, um die Leinwand innerhalb ihres Containers zu zentrieren. justify-content: center;und align-items: center;eine horizontale bzw. vertikale Zentrierung erreichen. Gleichzeitig legen wir eine feste Höhe für den Behälter fest, und Sie können diesen Wert nach Bedarf anpassen.

---

@missingsometimes