Establecer altura de línea como un porcentaje relativo al elemento principal

Question

Tengo un elemento receptivo donde su ancho y altura se escalarán. Dentro de esto tengo un texto que quiero centrar verticalmente.

¿Cómo puedo configurar el texto line-height para que sea el mismo que el de mis padres si no conozco la altura de los padres?

line-height: 100% es en relación con la altura normal de la fuente por lo que esto no ayuda ...

Answer 1

Aquí hay otra forma de centrar un elemento verticalmente. Me encontré con this technique hace algún tiempo. Básicamente usa un pseudo elemento y vertical-align: medio.

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can 
    also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 

Answer 2

que iba a tratar de poner el texto dentro de otro elemento, de los cuales se sabe (o conjunto) el tamaño. Luego, establezca el posicionamiento relativo en él, arriba, izquierda 50% y márgenes negativos a izquierda y derecha.

See this Fiddle

El único problema es que este se basa en un bloque de texto conocido/fijo. Si el texto es variable, me temo que tendrá que recurrir al uso de Javascript.

Answer 3

En cuanto a los hipervínculos:

que estaba teniendo este problema con respecto a los enlaces en el menú principal. Y dado que era <a> en las etiquetas <li>, necesitaba un poco de superficie para que los enlaces se puedan pulsar/tocar (vea touch target size). Así que lo que hice fue para el <ul> Establecí una altura fija (a través de su tarjeta madre en este caso), los <li> -s son un porcentaje de ella y los <a> -s tienen una altura mínima y propiedades de altura de línea establecidas para ellos y desde allí es fácil establecer la parte superior. El código:

.menu-header-main-container{ 
position: fixed; 
top: 0; 
bottom: 160px; 
}  
.menu-header-main-container ul.menu { 
      height: 100%; } 
      .menu-header-main-container ul.menu li { 
      height: 33.33%; 
      max-height: 110px; } 
      .menu-header-main-container ul.menu li a { 
       line-height: 40px; 
       min-height: 40px; 
       top: calc(50% - 20px); 
       position: relative; } }