Blog Post

No Centering For You

Posted by John Rhea

You’re trying to center the following element

<span class="zombie">Content That should be centered</span>

With the following CSS:

.zombie {
  margin: auto;
  width: 200px;
}

But like a zombie barista, it’s not working. Other than changing the way you center the element (e.g. via flexbox or grid) how can you fix this code and center the element?

Play with it on codepen: https://codepen.io/undeadinstitute/pen/dygaZMr?editors=1100

Answer Span is an inline element. Margin: auto; doesn’t work on inline items. Set display: block; on the .zombie and it will immediately center.