ExtJS 对齐项目的属性答案

【问题标题】：ExtJS Align Property for ItemExtJS 对齐项目的属性
【发布时间】：2018-11-19 14:31:55
【问题描述】：

我有一个看起来像这样的项目：

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%'
            }]

我正在尝试使其居中对齐，我尝试使用自定义样式（在填充下方:)，但它在“文本对齐”中显示无法识别的字符。我也尝试放置 align:'center' ，它根本没有做任何事情，但它不会导致任何错误。

我做的最后一件事（变得绝望）我为文本对齐添加了一个内联样式，但它内部的框需要样式而不是实际的 html。

我已尝试查看文档，但在样式文档下找不到 text-align。

谢谢！

【问题讨论】：

标签： css extjs alignment

【解决方案1】：

使用text-align 而不引用它不是对象字面量的有效语法。参考文献“JSON syntax for property names”。

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

... 应该改为 ...

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

听起来vertical-align 或line-height 比text-align 更幸运。

【讨论】：

另外，由于它的 javascript - 您可以将 javascript 关键字用于“text-align”属性，即“textAlign”。像这样：style: { textAlign : 'center' }

【解决方案2】：

text-align 仅适用于子元素，您有两种选择：

使用已弃用的 html 属性 valign="middle" 和 align="center"，它们适用于当前元素。
在img周围放一个div，然后放style="text-align:center"，记住text-align只对内联元素有效。（img 是内联的）。

【讨论】：

【解决方案3】：

您可以在 Main.scss 文件中编写一个 css 类，在其中声明所有对齐属性并在您的组件中应用您在 js 文件中使用它的类，使用

cls:"align-Items",

在scss文件中

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

【讨论】：