align

QRCode.html

@@ -53,15 +53,29 @@
             background-color: #45a049;
         }
 
-        #qrcode {
+        .qr-container {
             margin-top: 20px;
-            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+        #qrcode {
+            display: flex;
+            justify-content: center;
+            width: 256px; /* Match the QR code size */
+        }
+
+        #qrcode img {
+            display: block; /* Remove any potential inline spacing */
         }
 
         #qrLabel {
-            margin-top: 10px;
-            text-align: center;
             font-weight: bold;
+            text-align: center;
+            max-width: 256px; /* Match the QR code width */
+            word-wrap: break-word;
         }
 
         @media (max-width: 600px) {
@@ -87,8 +101,10 @@
 
         <button onclick="generateQR()">Generate QR Code</button>
 
-        <div id="qrcode"></div>
-        <div id="qrLabel"></div>
+        <div class="qr-container">
+            <div id="qrcode"></div>
+            <div id="qrLabel"></div>
+        </div>
     </div>
 
     <script>