的XPages：中心圖標和文本在lotusMessage面板

我有這樣的代碼：的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面板）。

有沒有快速垂直居中的方法？

來源

2015-03-13 Ben Dubuc

首先創建一個custom.css文件，並在oneUI樣式表之後加載它（如果您尚未加載）。
使用谷歌瀏覽器檢查元素（或螢火蟲），以您要的風格類對象的隔離（可能lotusMessage像你提到，但肯定檢查）
播放與填充像這樣：

填充頂：0.250em; 填充底部：0.250em; （這些只是可能的建議）
覆蓋的CSS在custom.css文件
回去了Chrome，並確保您的樣式加載
使用!important僅在必要時。有時你的樣式會被更具體的oneUI樣式覆蓋。

注意：使用chrome可以實際添加樣式並查看它們的外觀，當您喜歡結果時可以將其複製到自定義樣式表中。

這裏是一個職位，我上覆蓋的風格寫的，這可能有助於： http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html

來源

2015-03-13 20:08:31

的XPages：中心圖標和文本在lotusMessage面板

回答

相關問題