Cannot Center Text in CSS block using Text-Align

Question

I am trying to center the words on my page. Everything is working except the text is on the left side of the screen, not the center.

styling{
     color: white; 
     background-color: aqua;
     font-family: 'Hachi Maru Pop', cursive; 
     font-size: 18px;
     font-weight: bold;
     margin: o auto;
     text-align: center;
  }

First off, `styling` is not an HTML element. Therefore no styles are being applied. If it is a class or ID, please use the appropriate selector like `.styling` for a class or `#styling` for an ID. — Tanner Dolby, Jan 09 '21 at 21:17
Please also add the HTML, as it's also not clear what tag `styling` refers to. You can also recreate your issue using https://jsfiddle.net — Dollique, Jan 09 '21 at 21:19
@TannerDolby That was it. Thanks! I changed it to .styling and then just added the class names in the divisions rather than creating whole blocks of code labeled (which oddly enough worked for everything but centering the text). — Dylan S, Jan 10 '21 at 00:45

score 0 · Answer 1 · answered Jan 09 '21 at 21:17

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>

Cannot Center Text in CSS block using Text-Align

1 Answers1