Ver Mensaje Individual
  #6 (permalink)  
Antiguo 15/05/2010, 13:10
Maverick_cold45
 
Fecha de Ingreso: enero-2010
Mensajes: 12
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Consulta sobre vertical align + div

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

Última edición por Maverick_cold45; 11/06/2010 a las 10:01