如何稳定头部答案

【问题标题】：How to stabilize the header如何稳定头部
【发布时间】：2012-07-24 04:11:11
【问题描述】：

我的 Web 应用程序标题在中心包含一个文本，在右侧包含一个 ajax 状态。

每次用户激活 ajax 时，标题文本都会向左跳转

<h:outputText value="${messages.HEADER}"/>
<p:ajaxStatus id="ajax-StatusPanel" onsuccess="" style="float: right;margin-top: -5px;margin-right:10px;">                                                                     
    <f:facet name="start">                                                                                                                 
        <p:graphicImage value="resources/images/ajax-loader.gif" />                                                                        
    </f:facet>                                                                                                                             
    <f:facet name="complete">                                                                                                              
        <h:outputText value=""/>                                                                                
    </f:facet>                                                                                                                             
</p:ajaxStatus>

标题文本css：

.pe-layout-inner-north > .pe-layout-pane-content {
    background-color: #5080C0;
    border:1px solid #222222;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:1.5em;
    font-weight: bolder;
    text-align: center;
    color:#FFFFFF;
    display: block;
}

如何将标题永久设置在中心？

谢谢

【问题讨论】：

宽度是静态的还是动态的？
抱歉我不明白你的问题？ css 不是我的强项
是设定的宽度，还是会改变？
文字宽度不变，图片也不变
所以设置元素的宽度，并设置margin:0 auto;，而不是尝试在其父元素上使用text-align:center;。

标签： css jsf-2

【解决方案1】：

我找到了解决方案 - 使用 h:panelGrid:

<h:panelGrid columns="1" columnClasses="mainHeader" style="margin:0px auto;">
    <h:outputText value="${dy_messages.DYE_HEADER}"/>
</h:panelGrid>
<p:ajaxStatus id="ajax-StatusPanel" onsuccess="" style="float: right;margin-right:10px;margin-top: -32px">                                                                     
    <f:facet name="start">                                                                                                                 
        <p:graphicImage value="resources/images/ajax-loader.gif" />                                                                        
    </f:facet>                                                                                                                             
    <f:facet name="complete">                                                                                                              
        <h:outputText value=""/>                                                                                
    </f:facet>

谢谢

【讨论】：