Centrar texto en vertical en una capa

[jclpascual]

Hola amigos, tengo una capa con un height de 100px y dentro tiene un <p> y quiero que aparezca centrado verticalmente ¿como consigo esto? he probado con vertical-align pero nada.

Tengo otra duda con el padding, la capa tiene un alto de 100px, si en el css le pongo un padding de 15px este paddin me lo suma y me hace una capa con un alto de 115px ¿como funciona el padding y el margin en las capas? ¿lo suma? la capa la tengo posicionada con float por si cambia que creo que si.

Gracias

[pzin]

Iniciado por jclpascual

Hola amigos

Hola amigo.

Iniciado por jclpascual

tengo una capa con un height de 100px y dentro tiene un <p> y quiero que aparezca centrado verticalmente ¿como consigo esto? he probado con vertical-align pero nada.

Pues depende un poco del caso. Hay varias maneras de conseguirlo. Puedes usar desde tablas CSS, posicionamientos absolutos combinados con trasformaciones 2D, usar pseudo-elementos…

Iniciado por jclpascual

Tengo otra duda con el padding, la capa tiene un alto de 100px, si en el css le pongo un padding de 15px este paddin me lo suma y me hace una capa con un alto de 115px ¿como funciona el padding y el margin en las capas? ¿lo suma? la capa la tengo posicionada con float por si cambia que creo que si.

Es como funciona el modelo de caja de CSS. Si quieres alterarlo para que rellenos y bordes formen parte del ancho y alto, puedes poner algo así en tu CSS:

Código CSS:

*, *:before, *:after {
  box-sizing: border-box;
}
 

Sería algo como esto la diferencia:


Y por aquí más info sobre los modelos de caja de CSS.

Iniciado por jclpascual

Gracias

A sus pies.

[marcosgue]

Yo te recomendaria usar flexbox. Lo haces en medio minuto! Ahora estoy desde el movil. Pero si no te llegas a dar la idea me acisas y desde la mac te mando el codigo.

Saludos

[jclpascual]

Gracias a todos
No he usado nunca flexbox ¿ya se usa? ¿y el soporte para navegadores?

[pzin]

El soporte es amplio, un 93% de usuarios (que no navegadores) lo vería bien http://caniuse.com/#feat=flexbox