Foros del Web » Creando para Internet » CSS »

Consulta sobre vertical align + div

Estas en el tema de Consulta sobre vertical align + div en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 14/02/2010, 17:24
 
Fecha de Ingreso: mayo-2003
Mensajes: 312
Antigüedad: 14 años, 6 meses
Puntos: 2
Consulta sobre vertical align + div

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!
  #2 (permalink)  
Antiguo 14/02/2010, 20:24
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Consulta sobre vertical align + div

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
  #3 (permalink)  
Antiguo 15/02/2010, 00:57
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Consulta sobre vertical align + div

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.
__________________
twitter: @imbuzu
  #4 (permalink)  
Antiguo 15/02/2010, 07:35
 
Fecha de Ingreso: mayo-2003
Mensajes: 312
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Consulta sobre vertical align + div

Si le aplico a la tabla:

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

No me funciona.
¿Entonces?
  #5 (permalink)  
Antiguo 15/02/2010, 10:59
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Consulta sobre vertical align + div

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.
__________________
twitter: @imbuzu
  #6 (permalink)  
Antiguo 15/05/2010, 14:10
 
Fecha de Ingreso: enero-2010
Mensajes: 12
Antigüedad: 7 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 11:01
  #7 (permalink)  
Antiguo 28/10/2011, 19:54
 
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Consulta sobre vertical align + div

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
  #8 (permalink)  
Antiguo 14/08/2012, 17:47
 
Fecha de Ingreso: julio-2012
Ubicación: lima-peru
Mensajes: 14
Antigüedad: 5 años, 5 meses
Puntos: 0
Respuesta: Consulta sobre vertical align + div

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

Etiquetas: align, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:27.