Cannot Center Text in CSS block using Text-Align

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65647628/cannot-center-text-in-css-block-using-text-align

Answer 1

Probably your text element is not 100% wide. It is centering the text inside of itself already.

.text {
  background-color: limegreen;
  border: 1px solid green;
  text-align: center;
}

.text--100 {
  display: block;
}

<span class="text">This is not 100%. It's an inline element.</span>
<br />
<br />
<span class="text text--100">This is 100%. Block element fills parent width.</span>
<br />
<br />
<p class="text">Paragraphs are block elements.</p>