如何居中对齐 <p:notificationBar>答案

【问题标题】：how to center align <p:notificationBar>如何居中对齐 <p:notificationBar>
【发布时间】：2014-01-15 10:05:17
【问题描述】：

在我的 jsf/primefaces 应用程序的页脚中有<p:notificationBar>，我需要将其居中对齐。我尝试为其设置 align 属性，尝试将其放在居中对齐的 div 中，但它不起作用。任何帮助将不胜感激。

【问题讨论】：

你试过align:auto吗？
“未知属性对齐”是我得到的错误。
对不起，我的意思是margin:auto;
如果父级是页面正文，您可以使用 margin-left:30% 或其他东西...我只是不认为这是一个好的解决方案，但我找不到还有什么
关于这个问题的任何线索？？？

【解决方案1】：

也许你想要类似的东西：

<p:notificationBar position="bottom" effect="slide" widgetVar="bar" style="text-align: center;">  
    <h:outputText value="Example"/>  
</p:notificationBar>

【讨论】：

【解决方案2】：

如果您想使文本居中：

<p:notificationBar styleClass="center-text"></p>

CSS：

.center-text { text-align: center;}

如果您想将<p> 居中，则可以使用margin: 0 auto;，但这仅在您提供width 时才有效：

<p:notificationBar styleClass="center"></p>

CSS：

.center {
  margin: 0 auto;
  width: 200px;
}

如果由于内容是动态的或可变的而无法传递width，则可以给包装器一个text-align: center，给<p> 一个display : inline-block 并重置文本对齐。

<foo>
  <p:notificationBar></p>
</foo>

CSS

foo {
 text-align: center;
}
foo p {
 display: inline-block;
 text-align: left; /* reset text-align center */
}

【讨论】：

他没有尝试对齐文本，请重新阅读问题。