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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20982978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 19:45:27  来源:igfitidea点击:

extjs 4.2.1 - center align text in label

javascripthtmlcssextjs

提问by Android Noob

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

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

ABC
 B

I tried putting spantags around each line and styling them with text-align:centerbut both of the text are still left aligned.

我尝试span在每一行周围放置标签并为其设置样式,text-align:center但两个文本仍然左对齐。

EDIT: added some code:

编辑:添加了一些代码:

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

回答by Android Noob

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'

回答by MarijnS95

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:

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

display:inline-block;
width:40px;

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

display:inline-block;是因为正常的跨度不接受宽度。

See this jsfiddle

看到这个jsfiddle

回答by lmno

adding the span to the fieldLabelconfig of the textfieldworks.

将跨度添加到作品的fieldLabel配置中textfield

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

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

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

working example: http://jsfiddle.net/eLnu5/

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