How to align inline elements using text-align property?

Question

I tried applying the property on the container (body here) and it worked.

body { text-align: center; }

But when I applied the property on the particular element, it failed to align it towards center.

span { text-align: center; }

Answer 1

Because text-align should be applied to the parent element if you want to align the span. The span is an inline element, setting text-align on it won't have any effect. (On the other hand <p> for example is a block element, so the text-align can be applied on it.)

So below an example to align a span:

<div class="parent">
  <span>test</span>
</div>

The css for it:

.parent {
  text-align: center;
}