CSS text-align: center; not working issue [Solved]

# CSS text-align: center; not working issue [Solved]

The most common reason text-align: center; doesn't work in CSS is when the element has its display CSS property set to inline or inline-block.

Set the element's display property to block for text-align: center to work.

Here is an example of how the issue is caused.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin-top: 100px;
      }

      h1 {
        text-align: center;
        display: inline-block;
      }

      span {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>bobbyhadz.com</h1>

    <br />

    <span>google.com</span>
  </body>
</html>

text align center does not work on inline elements

The code for this article is available on GitHub

As shown in the screenshot, setting text-align doesn't work when the element's display CSS property is set to inline or inline-block.

h1 elements have a display of block by default, but we set the element's display property to inline-block.

index.css

Copied!
h1 {
  text-align: center;
  display: inline-block;
}

span elements have a display or inline by default, so setting the text-align CSS property on a span element has no effect.

index.css

Copied!
span {
  text-align: center;
}

To resolve the issue, set the display property of the elements to block instead.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin-top: 100px;
        margin-left: 30px;
      }

      h1 {
        text-align: center;
        display: block;
      }

      span {
        text-align: center;
        display: block;
      }
    </style>
  </head>

  <body>
    <h1>bobbyhadz.com</h1>

    <br />

    <span>google.com</span>
  </body>
</html>

set display property of elements to block

The code for this article is available on GitHub

Notice that setting text-align to center centers the contents of the elements when their display CSS property is set to block.

As the MDN docs state:

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element.

# Set the `text-align` property to `center` on the parent element

Here is an example of setting the text-align property to center on the parent element.

index.css

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        text-align: center;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <li>bobby</li>
      <li>hadz</li>
      <li>com</li>
    </div>
  </body>
</html>

setting text align to center on parent element

Note that you might have to set the width property of the container box to 100% if it doesn't already fill up the space.

style.css

Copied!
.box {
  text-align: center;
  width: 100%;
}

We set the text-align property to center on the parent div to center the li elements.

This would work even if the parent is an inline element, such as a span, as long as the child elements are block-level elements.

index.css

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!-- 👇️ parent element is a span -->
    <span class="box">
      <li>bobby</li>
      <li>hadz</li>
      <li>com</li>
    </span>
  </body>
</html>

setting text align to center on parent element

The code for this article is available on GitHub

Note that it wouldn't work if the parent is a span (inline) and the child elements are also span (inline).

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <span class="box">
      <span>bobby</span>
      <span>hadz</span>
      <span>com</span>
    </span>
  </body>
</html>

text align center does not work when parent and child elements are inline

In this case, you have two options:

Set the display property of the parent element to block.
Or set the display property of the child elements to block.

Here is an example that sets the display property of the parent element to block.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        text-align: center;
        display: block;
      }
    </style>
  </head>

  <body>
    <span class="box">
      <span>bobby</span>
      <span>hadz</span>
      <span>com</span>
    </span>

  </body>
</html>

set parent element display to block

The code for this article is available on GitHub

The text-align: center; property works when the parent's display property is set to block, however, notice that the child elements are still inline and displayed on a single line.

If you'd rather display them on separate lines, set the display property of the child elements to block.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        text-align: center;
      }

      .box span {
        display: block;
      }
    </style>
  </head>

  <body>
    <span class="box">
      <span>bobby</span>
      <span>hadz</span>
      <span>com</span>
    </span>
  </body>
</html>

set display of child elements to block

Now each child element is positioned on a separate line and they are all centered.

Conversely, if you have block-level elements that you want to center and display on a single line, set their display CSS property to inline or inline-block.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin-top: 100px;
      }

      .box {
        text-align: center;
      }

      .box p {
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <p>bobby</p>
      <p>hadz</p>
      <p>com</p>
    </div>
  </body>
</html>

block level elements displayed on one line centered

The code for this article is available on GitHub

We have 3 p elements (block-level) and want to display them centered, on a single line, so we set their display CSS property to inline-block.

index.css

Copied!
.box p {
  display: inline-block;
}

If you are still running into issues when trying to set text-align to center, try to also set the margin CSS property to auto.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin-top: 100px;
      }

      .box {
        text-align: center;
        margin: auto;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <p>bobby</p>
      <p>hadz</p>
      <p>com</p>
    </div>
  </body>
</html>

setting margin property to auto

When the margin CSS property is set to auto, the element is horizontally centered within its container.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

CSS text-align: center; not working issue [Solved]