QRCode.js生成的二维码水平居中的解决方案
在使用qrcode.js库生成二维码,并希望生成的二维码能够在其容器中居中。
以下是一个简单的例子,它展示了如何使用qrcode.js生成二维码,并通过CSS将其居中:
HTML代码
<div id="qrcode-container"><div id="qrcode"></div>
</div>
JavaScrip代码(使用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代码
#qrcode-container {display: flex;justify-content: center;align-items: center;height: 200px; /* 可以调整为你需要的高度 */
}
在这个例子中,我们使用了flexbox布局来使canvas在其容器中居中。justify-content: center;
和align-items: center;
分别实现了水平和垂直居中。同时,我们给容器设置了一个固定的高度,你可以根据需要调整这个值。
@漏刻有时