Centrar una linea span

[xFantaSx]

Hola, resulta que estaba modificando mi menú, y se me ocurrió agregar algunas cosas a mi página, entre ellas fue un nuevo botón del menu (ad-alert), al cual le he puesto un letrerito que dice "nuevo" en la esquina superior derecha.

El botón es un elemento 'li' que hace parte de una lista 'ul', el recuadro del letrerito es un div, y este div tiene un span con clase para modificar el texto.

mi problema es el siguiente:
El texto que se encuentra en el span no lo he podido centrar, siempre me queda un tanto a la derecha, No entiendo y no sé por qué el span me viene con una medida de 50px.
la unica forma que he encontrado para centrarlo es ponerle al div un ancho de 50px, de esta forma queda centrado, pero el problema es que no lo quiero tan largo, lo quiero de unos 30 px.
Alguna idea?.

dejo mi página por si quieren ver el botón. goo.gl/69quq

Gracias

[cristian_cena]

La forma en que debes centrar elementos difiere según su tipo.

Cuando se trata de elementos de línea: (no toman width ni height)

• text-align: center; para el centrado horizontal
• line-height:50px; para el centrado vertical, suponiendo que su contenedor mide 50px de alto.

Cuando se trata de elementos de bloque:

• margin: 0 auto; + width: ... ; para el centrado horizontal
• y para el centrado vertical:
  - Solucion basadas en display: table-cell (ie8+)
  - Solución basada en position:absolute + enfrentamiento de valores positivos y negativos en px y % usando margin-top y top o margin-bottom y bottom
  - si no me equivoco hay otra solucion basada en display:inline-block; puedes googlearla