Centrar un Span dentro de un contenedor Div

[marodal]

Hola a todos,

Me creado un contenedor con la etiqueta div y dentro de ella un span para escribir un titulo. Me gustaría que ese titulo estuviera centrado dentro del area que he definido para ello, por lo tanto me quiero centrar ese span tanto horizontal como verticalmente dentro del div. ¿Alguien sabe como hacerlo?

He probado con valign, o con margin: 0 auto...pero no funciona. El centrado horizontal lo hago con text-align:center, pero no se si es la solicion idonea, puesto que no se trata de texto, sino lo que quiero centrar es un span.

Gracias de antemano y un saludo.

[pzin]

Si el texto es de una sola linea:

Código CSS:

div {
  height: 200px;
}
 
span {
  line-height: 200px;
}
 

En caso de desconocer cuántas lineas serán:

Código CSS:

div {
  display:table;
}
 
span {
  display: table-cell; 
  vertical-align: middle;
}
 

Para esto último hay varias técnicas, y a veces es mejor una u otra a utilizar, pero depende del contexto.

[eduardobrutaldeath]

Iniciado por marodal

Hola a todos,

Me creado un contenedor con la etiqueta div y dentro de ella un span para escribir un titulo. Me gustaría que ese titulo estuviera centrado dentro del area que he definido para ello, por lo tanto me quiero centrar ese span tanto horizontal como verticalmente dentro del div. ¿Alguien sabe como hacerlo?

He probado con valign, o con margin: 0 auto...pero no funciona. El centrado horizontal lo hago con text-align:center, pero no se si es la solicion idonea, puesto que no se trata de texto, sino lo que quiero centrar es un span.

Gracias de antemano y un saludo.

La etiqueta SPAN está INLINE por eso no obedece al MARGIN: 0 AUTO; debes cambiar sus propiedades y luego aplicar el MARGIN.

Código CSS:

span{
display: block;
margin: 0 auto;
}