Category / Section
How to render QR code at center of the div in React platform
2 mins read
Syncfusion JavaScript Barcode control allows you to easily generate QRCode on 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 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>Syncfusion React QR Code</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.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 id="container" class="barcodeStyle">
<div id="barcode" class="element"></div>
</div>
</body>
</html>
Sample: Click here for sample