1. Inicio
  2. Pregunta y respuesta
  3. CSS - Alinear verticalmente contenido DIV

CSS - Alinear verticalmente contenido DIV

2009-12-10 23 views
7

Estoy tratando de centrar verticalmente algunos contenidos a través de CSS. Por mi vida, no puedo entender la causa. ¿Puede alguien decirme por qué la palabra "prueba" en el siguiente HTML siempre se alinea en la parte superior sin importar lo que haga?CSS - Alinear verticalmente contenido DIV

<html> 
    <head> 
     <title>test</title> 
    </head> 

    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
      <tr><td style='height:200px; width:300px; background-color:silver;'> 
       <div style='height:100%; width:100%; background-color:gray; text-align:center;'> 
        <div style='vertical-align:middle;'>test</div> 
       </div> 
      </td></tr> 
     </table> 
    </body> 
</html>

Muchas gracias por su ayuda!

Fuente

2009-12-10 user208662

+4

¿Por qué es dentro de una tabla? ¿Sabes que las tablas no son para el diseño? – BalusC

Respuesta

0

Trate de añadir valign="middle" a su etiqueta td, como:

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>

Fuente

2009-12-10 14:15:44 inkedmn

+0

Probablemente esto funcione en la mayoría de los navegadores, pero no cumple con los estándares. Por otro lado, el uso de tablas tampoco es bueno. – Martijn

+2

La pregunta es cómo alinear verticalmente el contenido 'div', no el contenido' td'. –

0

estilo de montura Try = 'vertical-align: media;' en el elemento padre En este momento, de hecho le está diciendo al div interno que alinee el texto con el medio, sin embargo, no le está diciendo que estire y ocupe toda la página. Básicamente terminas con un elemento div que es tan pequeño como el texto.

Puede usar el complemento Firebug en Firefox para depurar este tipo de problema de CSS.

Fuente

2009-12-10 14:16:47 rui

-2

tratar de usar line-height: 100px

Fuente

2009-12-10 14:17:37

4

Una forma rápida de efectuar la alineación vertical, como en su caso, es para que coincida con la línea de altura con la altura. 

<html> 
    <head> 
     <title>test</title> 
    </head> 
    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
       <tr><td style='height:200px; line-height: 200px; width:300px; background-color:silver;'> 
         <div> 
          <div style="text-align: center">test</div> 
         </div> 
       </td></tr> 
     </table> 
    </body> 
</html>

Fuente

2009-12-10 14:17:52

4

Debido vertical-align no es más que un sustituto CSS para el atributo valign en TD, y por lo tanto sólo funciona en display: table-cell elementos (y no, la solución adecuada es no cambiar el DisplayMode de su DIV)

Si es posible establecer una altura fija para el div, usted debería ser capaz de alinear verticalmente con margin: auto 0

Fuente

2009-12-10 14:20:02

Cuestiones relacionadas

 Cuestiones relacionadas