how to inline Align a block in custom app

[imabhijithak]

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);

});

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