ExtJS Align Property for Item

I have an item that looks like this:

items: [{
                xtype: 'box',
                html: '<img src="http://chart.apis.google.com/chart?mychart" alt="" style="text-align:center" />',
                name: 'first',
                id: 'first',
                align:'center',
                style:
                {
                    float:'left',
                    padding: '0px 0px 10px 0px',
                },
                width:'100%'
            }]

I am trying to get it aligned center, I have tried putting in a custom style (underneath padding:) but it says unrecognized character in "text-align". I've also tried putting alig开发者_如何学Cn:'center' which isn't doing anything at all, but its not causing any errors.

Last thing I did (getting desperate) I added in an inline-style for text align but the box that its inside needs the style not the actual html.

I've tried looking through the documentation and couldn't find text-align under the style doc.

Thanks!

Using text-align without quoting it isn't valid syntax for an object literal. c.f. "JSON syntax for property names".

style: {
  ...
  text-align: 'center'
  ...
}

... should instead be ...

style: {
  ...
  "text-align": 'center'
  ...
}

It also sounds like you're likely to have more luck with vertical-align or line-height than text-align.

text-align only works on child elements, you have a couple of choices here:

1. Use the deprecated html properties valign="middle" and align="center", which work on the current element.
2. Put a div around the img and then put style="text-align:center", just remember that text-align only works on inline elements. (img is inline).

You can write a css class in Main.scss file ,declare all the aligning properties in that and apply class in your component where you're using it in js file,using

cls:"align-Items",

in scss file

.align-Items{
 vertical-align: top;
}