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

我有以下代码：

<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>

字体图标和文本不是垂直对齐的，但我希望它们是垂直对齐的（就像所有lotusMessage面板一样）

有没有快速的方法来垂直居中

首先创建一个custom.css文件，并在oneUI样式表之后加载它（如果尚未加载）

使用Google Chrome inspect元素（或Firebug）隔离要设置样式的对象的类（可能像您提到的lotusMessage，但一定要检查）

像这样玩填充物：

垫面：0.250em； 垫底：0.250em；（这些只是可能的建议）

覆盖custom.CSS文件中的CSS

返回Chrome并确保加载了您的样式

使用

！重要信息

仅在必要时提供。有时，您的样式会被更具体的oneUI样式覆盖

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

下面是我写的一篇关于覆盖样式的文章，可能会有所帮助：