Centering the text in a text input

General
1

I have a text input and when user enters the text, I want it to be centered in the input. I have clicked the Font–>align center option, but text entered still left aligned? I tried Font–>Align Center on a few other text inputs but same result-entered txt still aligns left?

2

Hello Robert,

There are 2 ways to do that:

  • If you choose the type “text area”:

    image
    image322×200 6.59 KB

    In this case, you can apply “center” as a value of the property “font align”.
    image
    image308×161 5.87 KB

  • If you choose the type “text”:

    image
    image312×200 6.2 KB

    Here, you need to create a CSS class to the “text input” component and add these lines:

self .m-0{
     text-align: center;
}

image
image1477×853 53.2 KB

1 Like
3

The self .m-0{
text-align: center;
}
worked fine. I had tried self {text-align:center;} but would never have known to try this. Also surprised the align center option fin the Font area did not work. But this .m-0 seems to work fine. Thx.

1 Like
4

You’re welcome Robert :slightly_smiling_face:.
Of course it is not possible to apply a “self” text-align for the component “text input” (self here means the component).