How to render QR code at center of the div in Angular platform
This article explains how to render a QR code at the center of a div in the Angular platform. The Syncfusion Barcode control allows you to easily generate QR codes in your application.
To render QR code at center of the div, we need to follow the below steps:
Step 1: Create QR Code using QrCodeGenerator
You can use the Syncfusion Barcode control’s QRCodeGenerator to generate a QR code.
Step 2: Add style to div
To center the QR Code add style to the div.
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Refer the code snippet below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 QR Code</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<style>
#diagram {
display: block;
}
.barcodeStyle {
height: 400px;
width: 400px;
background-color: #acf1e9;
position: absolute;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body style="margin-top: 100px">
<div class="barcodeStyle">
<app-container class="element">
<div id="loader">Loading....</div>
</app-container>
</div>
</body>
</html>
Refer to the working sample for additional details and implementation : Click here for sample
