Foros del Web » Creando para Internet » CSS »

Alineación texto centrada verticalmente en DIV

Estas en el tema de Alineación texto centrada verticalmente en DIV en el foro de CSS en Foros del Web. Tengo un DIV así: ________________________ |Aquí empieza el texto... | | | | | | | | | | ________________________ Me gustaría tenerlo así: ________________________ ...
  #1 (permalink)  
Antiguo 21/03/2006, 04:11
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 13 años
Puntos: 1
Alineación texto centrada verticalmente en DIV

Tengo un DIV así:
________________________
|Aquí empieza el texto...
|
|
|
|
|
|
|
|
|
|________________________




Me gustaría tenerlo así:
________________________
|
|
|
|
|
|Aquí empieza el texto...
|
|
|
|
|
|________________________


Ojalá alguien sepa con qué se hace, thanks !
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #2 (permalink)  
Antiguo 21/03/2006, 04:32
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
Cita:
Iniciado por uamistad
Tengo un DIV así:
________________________
|Aquí empieza el texto...
|
|
|
|
|
|
|
|
|
|________________________




Me gustaría tenerlo así:
________________________
|
|
|
|
|
|Aquí empieza el texto...
|
|
|
|
|
|________________________


Ojalá alguien sepa con qué se hace, thanks !
Yo tampoco sé, así que para no complicarme hice una chapuza para salir del paso muy simple, añadir varios <br><br>... hasta la altura necesaria.
¿Cómo se hará de verdad?

Edito con el padding se puede, pero yo lo descarté porque me afectaba a los div de los lados.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #3 (permalink)  
Antiguo 21/03/2006, 06:52
Avatar de lyoung  
Fecha de Ingreso: noviembre-2005
Ubicación: Montevideo, la gran capit
Mensajes: 139
Antigüedad: 12 años
Puntos: 0
Es también una chapusa, pero más práctica

Dentro de DIV inclyes una tabla del ancho y alto de la div.
Que la celda tenga horientación vertical medio y allí pones el texto.
Tal vez haya una forma más profesional, pero esta es la que yo aplico.

SUERTE!!

Última edición por lyoung; 21/03/2006 a las 06:57
  #4 (permalink)  
Antiguo 21/03/2006, 07:00
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 13 años
Puntos: 1
Otra chapuza, jeje, cierto, es más práctica. Si no sale otra cosa, será esta la que meteré, thanks !
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #5 (permalink)  
Antiguo 21/03/2006, 11:37
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola uamistad, en realidad depende de como tengas tu div.

Te pongo un ejemplo:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#contiene_texto{
	background-color: #FFCC66;
	padding-top: 5%;
	padding-bottom: 5%;
	}
	</style>
</head>

<body>
<div id="contiene_texto">
<p>Texto en el centro</p>
</div>
</body>
</html> 
Prueba con el tuyo, saludosss
  #6 (permalink)  
Antiguo 21/03/2006, 20:12
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 13 años
Puntos: 1
El DIV tiene una altura asignada, le metí los porcentajes pero es como los <BR> múltiples, porque dependería del tamaño del texto y del contenido del texto (mucho o poco).

Lo probé con:

Código HTML:
//
//

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title>

<style type="text/css"> 
#contiene_texto{ 
    height:100px;
    background-color: #FFCC66; 
    padding-top: 1%; 
    padding-bottom: 1%; } 
</style> 

</head>
<body> 

<div id="contiene_texto"> <p>Texto en el centro</p> 
</div> </body> </html> 
El div lo uso en su totalidad para escribir texto (en realidad es un DIV interno) y como a ese DIV le puse un borde, se vería cool el texto perfectamente metido en el centro, sin importar si meto mucho o poco texto.

Es por eso que lo quería, de hecho pensé que era algo sencillo, como poner un vertical-text-align:center (esa etiqueta la inventé), jeje, pero pensé que podría haber una así.

Les agradezco a todos por contestar, por ahora me quedo con la solución de la tabla de lyoung, si no sale algo más.

='(

Salutes !
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #7 (permalink)  
Antiguo 21/03/2006, 23:02
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Mira que se puede con CSS (propiedad display:table-cell), pero no funciona para explorer, en cambio en Opera y Firefox de maravilla:

ejemplo:
Código HTML:
<div style="height:100px; background-color: #FFCC66; padding: 1% 0; display: table-cell; vertical-align: middle;">Colocar aquí el contenido de la nueva etiqueta Div</div> 
Saludos,

PD: me disculparan haberlo hecho en la misma etiqueta!
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 21/03/2006, 23:56
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola de nuevo, aquí otras opciones:

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

Saludosss
  #9 (permalink)  
Antiguo 22/03/2006, 00:12
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 13 años
Puntos: 1
Bomba !! Gracias, parece la solución indicada, ya que no depende de cuánto texto exista previamente, gracias !!!!!
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #10 (permalink)  
Antiguo 22/03/2006, 03:20
Avatar de hunab  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 133
Antigüedad: 12 años, 9 meses
Puntos: 1
Si sabes que el texto será de una línia puedes aplicar un line-height igual a la altura del contenedor, pero solo funcionará con una sola linia
__________________
Marcio Barrios
marciobarrios.com // artículos sobre estándares y desarrollo web
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 22:41.