Alineación texto centrada verticalmente en DIV

uamistad · #1 (**permalink**) 21/03/2006, 04:11

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 !

RBZ · #2 (**permalink**) 21/03/2006, 04:32

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.

lyoung · #3 (**permalink**) 21/03/2006, 06:52

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!!

uamistad · #4 (**permalink**) 21/03/2006, 07:00

Otra chapuza, jeje, cierto, es más práctica. Si no sale otra cosa, será esta la que meteré, thanks !

kahlito · #5 (**permalink**) 21/03/2006, 11:37

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

uamistad · #6 (**permalink**) 21/03/2006, 20:12

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 !

baccxus · #7 (**permalink**) 21/03/2006, 23:02

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!

kahlito · #8 (**permalink**) 21/03/2006, 23:56

Hola de nuevo, aquí otras opciones:

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

Saludosss

uamistad · #9 (**permalink**) 22/03/2006, 00:12

Bomba !! Gracias, parece la solución indicada, ya que no depende de cuánto texto exista previamente, gracias !!!!!

hunab · #10 (**permalink**) 22/03/2006, 03:20

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