how to align the qr code to center?

[hpabubacar]

the qr code stays at the left side of the div. I have tried the css alignment, the style attributes to align it to center. Yet, the qr code still remains on the left side of the screen.

'

' <br> <div id="qrcode" align="center" style="text-align:center;margin:0 auto;" class="center"></div> <br> <input type="text" id="qr"> <button type="button" id="genqr">generate QR code</button> <input id="printuqr" type="button" onclick="printDiv('qrcode')" value="print QR"/> <script type="text/javascript"> $(document).ready(function(){ $("#genqr").click(function(){ // qrcode.clear(); new QRCode(document.getElementById("qrcode"), $('#qr').val()); }); $("#genqr").click(function(){ $("#printuqr").show(); }); });

</script> </div>

[berserkore]

you can use the following:

//create your qrcode
new QRCode(document.getElementById("qrcode"), $('#qr').val());
//then
$("#qrcode > img").css({"margin":"auto"});

[WebDevBooster]

The unresponsiveness to normal CSS styling sucks. Thumbs down 👎 from me. It amazes me how something so BASIC can be ignored in such a project...

[jaakkouu]

I used CSS grid around it. Using align-items: center on grid container works for me :)

[maskott]

@WebDevBooster It should not be the responsibility of a QR code generation library to then help you with your CSS to place the output. From the code provided, a simple position: relative & a defined width is probably all @hpabubacar needs to center his QR code. Y’all go ask your CSS related questions on StackOverflow and give thanks to @davidshimjs for being such a bad ass!

[stonewareslord]

I didn't try @berserkore's solution, but using standard CSS, I wasn't able to center by just using #qr > img, I also had to center the canvas. It seems this library creates a temporary canvas (at least in Chrome Linux) and there's a few milliseconds where the QR code wouldn't be centered while the img was being constructed. The final CSS that fixed it is:

#qr > canvas {
  display: block; /* Required to allow centering of the canvas */
  margin: 0 auto;
}
#qr > img {
  margin 0 auto;
}

[scammi]

Here is what I did <div style="display: flex; justify-content: center; text-align: center;" id="qrcode"></div>

[Ruikuan]

you can wrap it in a div, set the div's width same as the img, then align the wrapping div center.

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

.qrcode-container {
    text-align: center;
    width: 128px;
    height: 128px;
    margin:  0 auto;
 }

[ghost]

I prefer to use this (bcs css doesn't work, idk why):

document.querySelector(
   '#qrcode > img'
).setAttribute(
   'style',
   'display: block; margin: 0 auto'
)

[lnsy-dev]

https://github.com/lindseymysse/qr-code-element

Hi. I wrote a little web component wrapper for this library that might solve your problem. It creates a div that you can access via css with qr-code. So, you would include my library above, then create your QR Code like you would a regular div:

  const qr_code =  document.createElemetn('qr-code')
  qr_code.setAttribute('value', 'Your address here')
  .setAttribute('style',`
  display:block;
  margin: 0 auto
`)

This repo doesn't seemed maintained, but I am maintaining my repo and will respond to bug reports.