CODEWITHSUNDEEP
css
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

text align center not working

I'm having a big issue in aligning the text in center of the following html and css:

html:

<article class="item-page">
  <p>
     text-align not working...
  </p>
</article>

css:

article {
    display: table-row;
    color: #f00;
}
p{
    text-align: center;
}

demo

Upvotes: 1

Views: 47

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

The key problem was because of using display: table-row;.

Use display:table;width:100% to it's parent, then only p also behaves as it is 100% wide then it can have center align of the width:

html:

<main>
<article class="item-page">
      <p>
         text-align not working...
      </p>
</article>
</main>

css:

main{
    display: table;
    width: 100%;
}
article {
    display: table-row;
    color: #f00;
}
p{
    text-align: center;
}

working demo

Why is this so?

Because when the content is inside table-layout the width works dynamically as per the content width (i.e. width is auto) and setting table to 100% makes it sure to be 100% wide.

Upvotes: 1

Related Questions