extjs 4.2.1 - 在标签中居中对齐文本答案

【问题标题】：extjs 4.2.1 - center align text in labelextjs 4.2.1 - 在标签中居中对齐文本
【发布时间】：2014-12-12 00:10:15
【问题描述】：

我在 ExtJS 中有一个 Ext.form.Label 组件。在标签中，我有 2 行文本。如何将这两行文本水平居中？例如：

ABC
 B

我尝试在每一行周围放置span 标签并使用text-align:center 设置它们的样式，但两个文本仍然左对齐。

编辑：添加了一些代码：

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

【问题讨论】：

在 Ext.form.label 中使用 html 代替文本

标签： javascript html css extjs

【解决方案1】：

感谢所有回答的家伙。我想通了：

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

然后在您的标签配置中，您只需像这样定义样式属性：

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

【讨论】：

【解决方案2】：

我不知道你到底想做什么，你有一些代码吗？要将跨度居中，跨度必须具有相同的宽度，因此请将其添加到您的 css 代码中：

display:inline-block;
width:40px;

display:inline-block; 是因为普通跨度不接受宽度。

See this jsfiddle

【讨论】：

我尝试了这些属性，但文本仍然左对齐。这可能是 ExtJS 特有的东西
没关系，我得到了你的解决方案。我只是在 HTML 中内联了 css。我之前在另一个文件中拥有所有 css 内容，并且它没有更改我指定的任何选择器。我怎样才能让跨度环绕文本的长度而不是硬编码宽度？我注意到对于以空格分隔的字符串，不适合单行的单词会换行并出现在下一行。
这很难做到，因为两个跨度的宽度必须相同。在跨度上使用width:inherit; on，并在它们周围使用一个 div 来设置宽度（例如，以 px、cm 或 % 为单位）。见updated jsfiddle

【解决方案3】：

将跨度添加到textfield 的fieldLabel 配置可以工作。

您将需要使用display:inline-block，因为 ExtJs 在您的标签末尾添加了一个“:”。

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

工作示例： http://jsfiddle.net/eLnu5/

【讨论】：