Search code examples
delphicentertmstms-web-core

How to center text inside a TWebMemo component

I am attempting to center my text within my TWebMemo component however I am unable to do it, does anyone perhaps know how to center the text?

Solution

  • Vertically centering the text in a TWebMemo is a bit tricky, but here's an answer to horizontally align the text in the TWebMemo. There isn't an Alignment property like there is with the VCL TMemo component.

    You have two ways to horizontally align the text. One with Bootstrap and one without Bootstrap.

    Without Bootstrap

    The TWebMemo is actually just a normal HTML <textarea> tag when it's compiled to HTML. So you can simply change the text-align to center the text horizontally:

    WebMemo.ElementHandle.style.setProperty('text-align','center');

    With Bootstrap

    If you're using Bootstrap, then you can add the text-center class to your TWebMemo's ElementClassName property. You can also add this via code:

    WebMemo.ElementClassName := 'text-center';

    If you already have other Bootstrap classes on it, then you can do the following to just add your new class with the existing classes:

    WebMemo.ElementClassName := WebMemo.ElementClassName + ' text-center';