search

Cordobo / angularx-qrcode

A fast and easy-to-use Angular QR Code Generator library with Ivy support
https://cordobo.github.io/angularx-qrcode/
MIT License
465 stars 126 forks source link

How do I center the QRCode in a div? #134

Closed xptodevx closed 2 years ago

xptodevx commented 3 years ago

The QR code is generated ok but I can't make it on the center regardless what I try is always on the left.

I'm on the latest Angular 11.

Cordobo commented 2 years ago

Hi @atul4a2l

I'm a little bit late to the party, but this might help others as well. This is not an issue with angularx-qrcode but rather a general CSS styling thing, I added some sample code for the centering and three buttons to the demo-app to control this. You can find the code starting with 12.0.3 in projects/demo-app. .. Adding a className to the component with the right styles might fix your issue.

    [allowEmptyString]="true"
    [className]="yourClassName">
    [elementType]="elementType"
    [errorCorrectionLevel]="errorCorrectionLevel"
    [qrdata]="qrdata"
    [scale]="scale"
    [width]="width"
</qrcode>```

whereas yourClassName is a CSS class:

.left { display: flex; flex: 1; justify-content: left; }

.center { display: flex; flex: 1; justify-content: center; }

.right { display: flex; flex: 1; justify-content: right; }



HTH