text-align: -webkit-center vs text-align: center

Question

Does anyone know why there is a difference between text-align: center and , text-align:-webkit-center ? For example if you have :

<section>  <h1>Title<h1>  <div class="image"></div> </section> 

// CSS with text-align: center;

section{  text-align: center;  } 

This will center just the text

// CSS with text-align: -webkit-center

section{  text-align: -webkit-center; } 

This will center the text and the image.

Same goes for text-align: -moz-center;

Answer 1

From the Mozilla Developer Network:

Both WebKit and Gecko support a prefixed version of left, center, and right, that applies not only to inline content but also to block elements. This is used to implement the legacy align attributes on table elements and <center>. Do not use these on production Web sites.

— MDN's documentation on text-align.

Answer 2

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.

text-align: -moz-center; text-align: -webkit-center;