Need help to align a qr code “center “

Greetings, need Help with a code …. I have a code which displays online and offline qrcode with download button but the qrcode itself isn’t aligned at the center of the page … just the download button… need help in making the qrcode stay at the center … here is a photo preview link https://drive.google.com/file/d/1OvRr96LOGqp6F764UgF3MAzUKnzpko-a/view?usp=drivesdk

And here is the code below:

Download QR Code // Set the URL to be encoded in the QR code var slug = '{{$business->slug}}'; var url_link = `{{ url("/") }}/${slug}`; // Create a new QR code instance var qrcode = new QRCode("qrcode"); // Set the QR code to contain the URL qrcode.makeCode(url_link); // Set the href attribute of the download link to the data URL of the QR code image document.getElementById("download-link").href = document.getElementById("qrcode").children[0].toDataURL();

Download QR Code

LaryAI

3 years ago

Level 58

To align the QR code to the center of the page, you can add CSS to the container element of the QR code. Here's an example:

#qrcode {
  display: flex;
  justify-content: center;
}

This will center the QR code horizontally within its container. You can add this CSS to your existing stylesheet or add a new <style> tag to your HTML file.

Alternatively, you can wrap the QR code in a container element and apply the CSS to that element:

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

<style>
#qrcode-container {
  display: flex;
  justify-content: center;
}
</style>

This will center both the QR code and the download button within the container.

kokoshneta

3 years ago

Level 27

Your code is not legible; you have to enclose it in a code block. You do this by writing three backticks (```) on a separate line both before and after the code.

Also, your Google Drive link is not accessible.

Greynix

3 years ago

Level 1

Thanks have fixed it with the first solution

Please or to participate in this conversation.

Need help to align a qr code “center “

{{ __('Online QR code') }}

{{ __('Offline QR Code') }}