I have a Ext.form.Label ponent in ExtJS. In the label I have 2 lines of text. How do I horizontally center both of these lines of text? For example:

ABC
 B

I tried putting span tags around each line and styling them with text-align:center but both of the text are still left aligned.

EDIT: added some code:

label.update('<span>ABC</span><br>'+
             '<span>B</span>');

I have a Ext.form.Label ponent in ExtJS. In the label I have 2 lines of text. How do I horizontally center both of these lines of text? For example:

ABC
 B

I tried putting span tags around each line and styling them with text-align:center but both of the text are still left aligned.

EDIT: added some code:

label.update('<span>ABC</span><br>'+
             '<span>B</span>');

• javascript
• html
• css
• extjs

• using html instead of text in Ext.form.label – John Paul Cárdenas Commented Jan 7, 2014 at 22:37

3 Answers 3

Thanks for all the answer guys. I figured it out:

label.setText('ABC<br/>B');

Then in your label config, you simply define the style property like this:

style: 'display:inline-block;text-align:center'

I don't know what you are exctly trying to do, do you have some code? To center things with spans, the spans must be the same width, so add this to your css code:

display:inline-block;
width:40px;

The display:inline-block; is because normal spans don't accept widths.

See this jsfiddle

adding the span to the fieldLabel config of the textfield works.

You will need to uses display:inline-block because ExtJs adds a ":" at the end of your label.

   {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: '<span style="display:inline-block; text-align:center;">Really long top<br/>small</span>',
    }

working example: http://jsfiddle/eLnu5/