Alinear al centro de un div texto

zyon · #1 (**permalink**) 30/08/2011, 16:04

Hola, he intentado sin éxito ajustar un TEXTO en el centro de un div, si importar, alguien tiene alguna idea de que podría aplicar?

Saludos y gracias de antemano!

IsaBelM · #2 (**permalink**) 30/08/2011, 16:15

usa la propiedad display con valores para tablas. después para centrar el texto text-align:center y vertical-align: middle

zyon · #3 (**permalink**) 30/08/2011, 16:36

Gracias!! ya había usado el text-align y el vertical-align pero no me hacía nada, lo del display si no lo sabía, lo revisaré, aunque ya lo resolví usando el padding top, me funciona por que son div's de un tamaño específico que funcionan como botón, por que si fueran de tamaño variable mi solución no funcionaría, de todos modos checaré lo que mencionas! Gracias IsaBelM

Saludos!!

IsaBelM · #4 (**permalink**) 30/08/2011, 16:54

para que veas un ejemplo

Cita:

<!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 content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
#contenedor {width: 400px; height: 400px; background-color:red; display: table;}
#texto {display: table-cell; text-align: center; vertical-align: middle;}
</style>
</head>
<body>
<div id="contenedor">
<div id="texto">
texto centrado horizontal y verticalmente
</div>
</div>
</body>
</html>

FileWeb · #5 (**permalink**) 30/08/2011, 19:34

Hola zyon,

Efectivamente has dado con la tecla; para alinear cualquier texto dentro de una capa (div) lo normal es jugar con text-align o padding. Me gustaría recordarte que también se puede poner porcentajes(100%) en lugar del típico pixel(100px).

Respecto a las cajas,yo al igual que muchos, la desaconsejamos totalmente y las vemos obsoletas por ser tan imprecisas de cara al navegador. De hecho hace tiempo que no veo cajas en las nuevas paginas web de calidad que se están haciendo.

En fin, Enhorabuena por encontrar la solución, ya solo te queda probarlo en los 3 o 4 navegadores por antonomasia.

Recibe un gran abrazo,

Adrián Canela.

IsaBelM · #6 (**permalink**) 31/08/2011, 05:33

Cita:

Iniciado por FileWeb

Hola zyon,

Efectivamente has dado con la tecla; para alinear cualquier texto dentro de una capa (div) lo normal es jugar con text-align o padding. Me gustaría recordarte que también se puede poner porcentajes(100%) en lugar del típico pixel(100px).

y las diferentes resoluciones??

Cita:

Iniciado por FileWeb

Respecto a las cajas,yo al igual que muchos, la desaconsejamos totalmente y las vemos obsoletas por ser tan imprecisas de cara al navegador. De hecho hace tiempo que no veo cajas en las nuevas paginas web de calidad que se están haciendo.

con cajas te referirás a bloques. entonces con que se maqueta ahora?? se ha vuelto a usar tablas??

Cita:

Iniciado por FileWeb

En fin, Enhorabuena por encontrar la solución, ya solo te queda probarlo en los 3 o 4 navegadores por antonomasia.

Recibe un gran abrazo,

Adrián Canela.

conoces algún navegador que no acepte esas dos propiedades??

podrías razonar lo que comentas??

FileWeb · #7 (**permalink**) 03/09/2011, 10:28

Hola IsaBelM,

Yo me refiero a las tablas (<table>), y digo que en mi opinion es obsoleto y que yo lo hago todo con <div> para que nos entendamos.

También le comento de probarlo "siempre" todo en varios navegadores para asegurarse de que todo lo hizo bien. No solo con esas propiedades sino siempre que haga una pagina.

Y concretamente para las resoluciones están valores como %.

Un saludo.

IsaBelM · #8 (**permalink**) 03/09/2011, 15:30

Cita:

Iniciado por FileWeb

Hola IsaBelM,

Yo me refiero a las tablas (<table>), y digo que en mi opinion es obsoleto y que yo lo hago todo con <div> para que nos entendamos.

obsoleto?? si es para tabular datos, es lo recomendable

Cita:

Iniciado por FileWeb

Y concretamente para las resoluciones están valores como %.

Un saludo.

si te refrieres ha hacer diseño de web líquidas

hay que planificarlo muy bien antes de embarcarse en ello

pd: no eran 3 pies??

trevol · #9 (**permalink**) 04/09/2011, 10:15

Por que no pruebas con las propiedades margin-left y margin right:

Seria meter en otro div dentro de ese div el texto y llamarlo por ejemplo divtexto.

Código CSS:

Ver original#divtexto{
margin-left:100px;
margin-right:50px;
}