title: How to center <ion-label> inside a <ion-list-header> in Ionic 4?
body: <p>How can text in <code>&lt;ion-label&gt;</code> be horizontally centered within a <code>&lt;ion-list-header&gt;</code> element in Ionic 4?</p>
  
  <p>I found the <em>text-center</em> attribute utility as shown below and documented in ionic doc, but it doesn't work.</p>
  
  <p>I also tried to add <code>class="ion-center-text"</code>.</p>
  
  <p>But neither test works when the <code>&lt;ion-label&gt;</code> is inside an <code>&lt;ion-list-header&gt;</code>.
  But this works well if the <code>&lt;ion-label&gt;</code> is wrapped inside an <code>&lt;ion-item&gt;</code>!</p>
  
  <pre><code>    &lt;ion-list-header text-center&gt;
        &lt;ion-label&gt;Text not centered&lt;/ion-label&gt;
      &lt;/ion-list-header&gt;
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>    &lt;ion-list-header&gt;
        &lt;ion-label text-center&gt;Text still not centered&lt;/ion-label&gt;
      &lt;/ion-list-header&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>    &lt;ion-list-header&gt;
        &lt;ion-label class="ion-text-center"&gt;Text still not centered&lt;/ion-label&gt;
      &lt;/ion-list-header&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>    &lt;ion-list-header  class="ion-text-center"&gt;
        &lt;ion-label&gt;Text still not centered&lt;/ion-label&gt;
      &lt;/ion-list-header&gt;
  </code></pre>
  
  <p>I just need a short and clean solution to center my <code>&lt;ion-label&gt;</code> wrapped inside an <code>&lt;ion-list-header&gt;</code>.</p>
  
  <p>Does someone have a solution that matches the "best practices" of ionic 4 ?</p>
  
  <hr>
  
  <p>Solution found with the help of @annaya is to change the display mode of <code>&lt;ion-list-header&gt;</code> either on <code>display:block</code> or better to keep <code>display:flex</code> and add <code>justify-content:center</code>. 
  Like that:</p>
  
  <pre><code>    &lt;ion-list-header&gt;
        &lt;ion-label&gt;Text centered&lt;/ion-label&gt;
      &lt;/ion-list-header&gt;
  </code></pre>
  
  <p>with:</p>
  
  <pre class="lang-css prettyprint-override"><code>    list-item-header{
          justify-content: center;
      }
  </code></pre>
  
  <p>Thanks for replies, comments and english corrections ;)</p>