how to inline Align a block in custom app

imabhijithak
Shopify Partner
3 0 0

iam trying to create a checkout ui app , i want my texts to be aligned center but now its aligned to start could you please suggest how i can achieve it 
below is my checkout.js file code for app 

import {
  extension,
  TextBlock,
  BlockStack,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const textBlock = root.createComponent(BlockStack, undefined, [
    root.createComponent(
      TextBlock,
      undefined,
      'PLEASE NOTE BEFORE PURCHASE:',
    ),
    root.createComponent(
      TextBlock,
      undefined,
      'CHECK THAT ALL INFORMATION IN YOUR CART IS CORRECT. ORDERS CANNOT BE CHANGED OR CANCELLED ONCE PLACED. ORDERS WILL SHIP WIHIN 2 BUSINESS DAYS. LIMIT 10 ITEMS PER ORDER',
    ),
    root.createComponent(
      TextBlock,
      undefined,
      '*ORDERS PLACED WITH FLASH PROMO CODES ARE NOT ELLIGIBLE FOR REFUNDS. EXCHANGE OR STORE CREDIT ONLY.',
    ),
  ]);

  root.appendChild(textBlock);
});
imabhijithak_0-1711468195702.png

above image is the present situation , i want it to look like below image , aligned center , i did this in inspect elements style

imabhijithak_1-1711468259395.png

 



Replies 0 (0)