Question

我有这段代码：

<xp:panel styleClass="lotusMessage" style="vertical-align: middle;">
            <xp:text escape="false" id="computedField1">
                <xp:this.value><![CDATA[#{javascript:'<i class="fa fa-exclamation-circle fa-2x pull-left fa-fw"></i>'}]]></xp:this.value>
            </xp:text>
            <xp:this.rendered><![CDATA[#{javascript:sessionScope.sortedSearchResults.errorMsg !=""}]]></xp:this.rendered>

                <xp:text escape="true" styleClass="textmiddle" style="font-size:10pt;color:rgb(0,0,0)">
            <xp:this.value><![CDATA[#{javascript:if(!!sessionScope.sortedSearchResults) {
    var msg = sessionScope.sortedSearchResults.errorMsg; 
    if( msg !="") {
        msg;
    }
}}]]></xp:this.value>

            </xp:text>
        </xp:panel>

font-awesome图标和文本没有垂直对齐，但我希望它们（就像所有lotusMessage面板一样）。

有垂直居中的快捷方式吗？

Answer 1

首先创建一个custom.css文件，并在oneUI样式表之后加载它（如果你还没有）。
使用Google Chrome检查元素（或Firebug）来隔离要设置样式的对象的类（可能就像你提到的lotusMessage，但肯定会检查）
使用这样的填充：

填充顶：0.250em; 填充底：0.250em; （这些只是可能的建议）
覆盖custom.css文件中的CSS
返回Chrome并确保您的样式正在加载
仅在必要时使用!important。有时你的样式会被更具体的oneUI样式覆盖。

注意：使用chrome，您实际上可以添加样式并查看它们的外观，当您喜欢结果时，可以将其复制到自定义样式表中。

这是我写的一篇关于覆盖样式的帖子，可能会有所帮助： http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html

XPages：在lotusMessage面板中居中图标和文本

1 个答案: