h:outputText 值对齐中心答案

【问题标题】：h:outputText value to align centerh:outputText 值对齐中心
【发布时间】：2015-12-19 19:52:17
【问题描述】：

我试图将被 div 标签包围的 h:outputText 标签的值居中对齐。我发现示例 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;
 }

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

【问题讨论】：

标签： html css alignment center

【解决方案1】：

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

和我一起工作:)

【讨论】：

【解决方案2】：

你需要将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;
    }

【讨论】：

请解释你的答案。

【解决方案3】：

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

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

【讨论】：