h：输出文本值以居中对齐

Question

我试图将 h:outputText 标签的值居中对齐，该标签被 div 标签包围。我发现示例 1) 满足了我的目标，但是我希望使用 css 类来满足需要，但我没有成功。示例2）是我尝试过的但失败了。

Example 1)
<div align="center">
    <h:outputText value="Have a blessed day!" />
</div>

Example 2)
<div class="header">
    <h:outputText value="Have a blessed day!" /.
</div>

In css file
.header {
    align: center;
 }
// tried also text-align
.header {
    text-align: center;
 }

[更新] 对不起。这是一场虚惊。确实文本对齐有效。我使用的浏览器 IE 10 显示了缓存数据，所以我被误导了。

Answer 1

style="display: block; width:100%; text-align:center;"

和我一起工作:)

Answer 2

您可以使用以下代码来实现您的需求

<div class="container">
<div class="center">
  <h:outputText value="Have a blessed day!" />
</div>
</div>

在 CSS 中：

.container {
  display: flex;
  justify-content: center;
}

.center {
  width: 800px;
}

Answer 3

您需要在其样式中添加

display: block

，然后您可以使用

margin: 0 auto

将其集中。

   <h:outputText style="display: block; margin: 0 auto" value="Have a blessed day!"/>

或者如果你想使用一个类：

    <h:outputText styleClass="cls" value="Have a blessed day!"/>
    .cls {
    display: block; 
    margin: 0 auto;
    }

Answer 4

您可以使用 div ； `

`