h:outputText value to align center

Question

I was trying to align center the value of h:outputText tag which is surrounded by div tag. I found out that example 1) meets my goal however I was hoping to use css class to meet the need but I've not been successful. Example 2) is what I have tried which failed.

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

[update] I'm sorry. It was a false alarm. Indeed text-align worked. The browser I was using, IE 10, displayed cached data so I was misled.

Solution 1

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

works with me :)

Solution 2

You need to add display: block to its style, and then you can use the margin: 0 auto to centralize it.

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

Or if you want to use a class:

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

Solution 3

You can use the following code to achieve your requirement

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

In CSS:

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

.center {
  width: 800px;
}

Comments

[Taher A. Ghaleb]

Please explain your answer.