Question

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

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

我试图让它对齐中心，我尝试了一个自定义样式（在填充下面:)但它在“text-align”中表示无法识别的字符。我也尝试过对齐：'center'，它根本没有做任何事情，但它没有造成任何错误。

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

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

谢谢！

Answer 1

使用text-align而不引用它不是对象文字的有效语法。 C.F. “JSON syntax for property names”。

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

......应该是......

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

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

Answer 2

text-align仅适用于子元素，您可以在此处选择几个：

使用弃用的html属性valign =“middle”和align =“center”，它们适用于当前元素。
在img周围放一个div，然后输入style =“text-align：center”，只记得text-align仅适用于内联元素。（img是内联的）。

Answer 3

您可以使用

在Main.scss文件中编写一个CSS类，声明其中的所有对齐属性，然后在js文件中使用该类的组件中应用该类。

cls:"align-Items",

在scss文件中

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

ExtJS对齐项目的属性

3 个答案: