Consulta sobre vertical align + div

Dago · #1 (**permalink**) 14/02/2010, 17:24

Gente,
Tengo una doble consulta.

1- Para alinear un div verticalmente dentro de otro div, yo uso lo siguiente:

Código:

<div style="position:absolute; background-color: red; width:780px; height:252px; "> 
<div style="position: absolute; background-color: green; width:770px; height: 242px; top:50%; margin-top: -121px;">

</div>
<div>

Consulta 1: Es la forma correcta, o conocen alguna forma "MEJOR" de alinear un DIV dentro de otro DIV verticalmente.

2- Tomando el mismo ejemplo, que pasaria si yo colocara una tabla dentro del segundo div y quisiera alinearla verticalmente. ¿Como sería?

Código:

<div style="position:absolute; background-color: red; width:780px; height:252px; "> 
<div style="position: absolute; background-color: green; width:770px; height: 242px; top:50%; margin-top: -121px;">
<table border="1" width="100%" id="table1" style="height: 100;">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
<div>

Desde ya, agradezco cualquier ayuda.
GRACIAS!

maycolalvarez · #2 (**permalink**) 14/02/2010, 20:24

vertical-align no aplica para elementos de bloque (block). sólo de línea (display: inline;)

yo lo centraría utilizando el padding top y bottom del padre

buzu · #3 (**permalink**) 15/02/2010, 00:57

Otra opción para alinear elementos especialmente si están contenido dentro de un elemento que varía en tamaño es usar javascript para obtener la altura del elemento padre y de esa manera poder determinar la posición correcta para el elemento que queremos alinear.

Dago · #4 (**permalink**) 15/02/2010, 07:35

Si le aplico a la tabla:

top: 50%;
margin-top: -50px; /* El negativo de la mitad del alto */

No me funciona.
¿Entonces?

buzu · #5 (**permalink**) 15/02/2010, 10:59

Es que no funciona de esa manera, le tienes que dar medidas especificas. Si ambos elementos tienen alturas fijas lo mejor es que hagas el calculo manualmente y luego adaptes los estilos con las medidas que has obtenido.
Dale una leida a esto:

http://www.jakpsatweb.cz/css/css-ver...-solution.html

Espero te sirva de algo.

Maverick_cold45 · #6 (**permalink**) 15/05/2010, 13:10

Pues aqui les presento este otro metodo, para que el contenido de un div este alineado respecto el alto

El unico inconveniente es que el div deve tener un alto especifico u ocupar una altura.

El metodo consiste en añadir una tabla que ocupe todo el ancho de div y dentro de ella el contenido que puede ser otro div, y asi sucesivamente

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
El div con la Tabla
<div align="left" style="width:250px; height:490px; vertical-align:middle">
	<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="background:#CCCCCC">
    	<tr>
      		<td valign="middle"><div align="center">
      		  <p>Width=100%</p>
      		  <p>Heigth=100%<br />
   		      </p>
      		</div></td>
		</tr>
	</table>
</div>
<p>&nbsp;</p>
<p>El div con la Tabla dentro de otro div mantiene sus propiedades
</p>
<div style="width:200px; height:300px; overflow:auto">
<div align="left" style="width:250px; height:490px; vertical-align:middle">
	<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="background:#CCCCCC">
    	<tr>
      		<td valign="middle"><div align="center">
      		  <p>Width=100%</p>
      		  <p>Heigth=100%</p>
      		</div></td>
		</tr>
	</table>
</div>
</div>
<p>&nbsp;</p>
<p>Aqui un ejemplo del div con la tabla dentro de celdas ocupando todo el ancho
</p>
<table height="500px" border="1">
	<tr>
	  <td width="250" valign="top">
			<div align="left" style="width:250px; height:490px; vertical-align:middle">
			<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="background:#CCCCCC">
        		<tr>
          			<td valign="middle"><div align="center"><div align="center">
          			  <p>Width=100%</p>
          			  <p>Heigth=100%<br />
          			  </p>
          			  </div>
          			</div></td>
        		</tr>
      		</table>
	  		</div>
  	  </td>
		<td width="250" valign="middle">
		  <div align="left" style="width:250px; height:490px; vertical-align:middle">
            <table width="250px" height="490px" border="0" cellpadding="0" cellspacing="0" style="background:#CCCCCC">
              	<tr>
                	<td valign="middle"><div align="center">
                	  <p>Width=250px</p>
                	  <p>Heigth=490px<br />
                	  </p>
                	  </div></td>
              	</tr>
			</table>
		  </div>
		</td>
	</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Pues no es algo estandarizado pero lo unico que requiere es que añadas la tabla y que el div tenga almenos un alto, ya sea manualmente o automaticamente

papitorico6969 · #7 (**permalink**) 28/10/2011, 18:54

Hola a todos, despues de quemar pestañas, llege a la solucion
1.- dentro del cuadro de dialogo de editar la regla, la primera opcion es TYPE (TIPO) y dentro de esta opcion hay un casillero que dice LINE -HEIGHT, ahi escribes el MISMO ALTO QUE PUSISTE A TU DIV y listo sea texto o imagen se centrara , es decir funcionara tu VERTICAL-ALIGN:MIDDLE
suerte a todos

ecdejga · #8 (**permalink**) 14/08/2012, 16:47

papitorico6969 centrar de eso modo es exelente solo para una linea de texto, pero en dos lineas no sirve porq line - height afecta tambien ala segunda linea texto. hace que las dos lineas de texto tengan la separacion(vertical) del porcentaje puesto