CSS - vertical-align no trabajar - Excelente biblioteca

Tengo algunas realmente básica HTML & CSS:CSS - vertical-align no trabajar

Aquí está el código HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" media="all" href="stylesheet.css"> 
     <title>Hello, World!</title> 
    </head> 
    <body> 
     <header> 
      Hello<sup>World</sup> 
     </header> 
    </body> 
</html>

Aquí está la CSS:

header { 
    vertical-align: middle; 
    height: 60px; 
    background-color: #00F; 
}

Pero el texto no se alinea en el medio. Por qué no?

Fuente

2011-03-26 ryyst

La propiedad vertical-align sólo se aplica a:

a nivel de línea y los elementos 'table-cell'

Ver this link.

Puede usar line-height para centrar verticalmente el texto, simplemente hacerlo más grande que el font-size, sin embargo, solo es efectivo si el texto abarca una sola línea.

Como alternativa, puede agregar padding a la parte superior e inferior del elemento header por valores iguales.

Editado como por comentario: la solución obvia si se usa el elemento HTML5 header sería convertirlo en display: table-cell; en lugar del bloque predeterminado que creo que se aplica el restablecimiento de las CSS.

Fuente

2011-03-26 12:18:02 clairesuzy

Aunque voy a poner mucho más en el encabezado (piense en navegación, búsqueda, etc.). ¿Tendré que poner el texto en un contenedor separado? – ryyst

no, no debería necesitar un div/contenedor separado, solo rellene el encabezado uniformemente arriba y abajo – clairesuzy

@clairesuzy: Eso no tiene sentido. Imagina que tuve que usar textos de diferentes tamaños en el encabezado y quería alinearlos en el medio. Nunca podría lograr eso con relleno, ¿podría? – ryyst

El atributo vertical-align es solo para elementos en línea. No tendrá ningún efecto sobre los elementos de nivel de bloque, como un div o un párrafo. Si desea alinear verticalmente un elemento en línea con el medio, simplemente use esto.

vertical-align: middle;

ver más aquí: Understanding vertical-align, or "How (Not) To Vertically Center Content"

Fuente

2011-03-26 12:13:53

vertical-align no funciona de la manera que usted piensa que lo hace en elementos con display:block. La gente generalmente solo usa, por ejemplo, line-height:60px si el texto es lo único en el elemento y todo permanece en la misma línea.

Si van a entrar más cosas, probablemente sea mejor darle al contenedor una altura si es absolutamente necesario y ajustar el margen/relleno/etc. de elementos dentro del elemento contenedor hasta que se vea bien.

Fuente

2011-03-26 12:15:18 Marcel

Bueno, no va a haber mucho más en la cabecera en el extremo (navegación y esas cosas). Entonces, usar 'line-height' no es una posibilidad. – ryyst

@ryyst: Ver respuesta actualizada. – Marcel

No puedo poner el texto dentro de un 'div' y' vertical-align: middle' que 'div' aunque dado que' div's no están en línea, ¿verdad? ¿Qué es una buena solución (lo siento por las preguntas tontas, soy muy nuevo en HTML/CSS). – ryyst

Si no desea utilizar una tabla se puede utilizar vertical-align: pantalla central y: inline-block durante el uso de un elemento en línea vacía con la altura del 100%:

http://jsfiddle.net/ycugZ/

<!DOCTYPE><html><body> <!-- Author: brillout.com --> 

<div style='height: 300px;border: 1px solid black;text-align:center'> 
    <div class='i'>vertical-align + inline-block<br>trick<br>in action</div> 
    <div class='i' style='height:100%;width:0px'></div> 
</div> 
<style> div.i{ display: inline-block; vertical-align: middle } </style> 

</body></html>

Fuente

2012-05-05 18:45:07 brillout

Prueba de esto, funciona muy bien para mí:

/* Internet Explorer 10 */ 
display:-ms-flexbox; 
-ms-flex-pack:center; 
-ms-flex-align:center; 

/* Firefox */ 
display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

/* Safari, Opera, and Chrome */ 
display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

/* W3C */ 
display:box; 
box-pack:center; 
box-align:center;

Fuente

2013-09-23 18:06:56

<div style="border:1px solid #000;height:200px;position: relative;"> 
    <div style="position: absolute;top: 50%;left:50%;"> 
    hello mahesh 
    </div> 
</div>

Fiddle demo

Pruebe esto.

Fuente

2014-08-15 14:09:28

Desafortunadamente, el texto no está en el verdadero centro. La esquina superior izquierda de la "caja" de texto está ahora en el centro. – Christoph

Flexbox puede hacer esto con bastante facilidad ahora:

header { 
    display: flex; 
    align-items: center; 
    justify-content: center;; 
}

http://codepen.io/anon/pen/waYBjv

Fuente

2015-07-23 18:47:45

Aquí es mi truco favorito para las cosas de alineación verticales que utiliza cuadro de flexión, todo debe utilizar la caja de la flexión!

header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: black solid 0.1rem; 
 
    height: 200px; <!--Insert any height --> 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <link rel="stylesheet" media="all" href="stylesheet.css"> 
 
     <title>Hello, World!</title> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      Hello<sup>World</sup> 
 
     </header> 
 
    </body> 
 
</html>

Fuente

2015-07-23 18:50:21 Zargold

CSS - vertical-align no trabajar

Respuesta

Cuestiones relacionadas