Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 11 de 11

Tema: como centrar texto en capa div

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    25 feb, 06
    Mensajes
    74
    Poder de Reputación
    18

    como centrar texto en capa div

    hola, quiero saber como centrar verticalmente mediante css un titulo H1 en una capa DIV, supongo que no me vale ninguna propiedad que sea absoluta, ya que el ancho de la capa div es variable (%).
    salu2 y gracias

    ps: ya se cambiar las propiedades de H1 desde css, lo que necesito es la propiedad que me permite alinear en el medio de la capa div (como text-align:center, pero verticalmente)

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    30 nov, 05
    Mensajes
    884
    Poder de Reputación
    22
    yo los css no los uso asi que no tengo mucha idea. he estado mirando por google y he encontrado esto a ver si te sirve.

    div#centrado {
    margin-top:-100px;
    top:50%;
    }

    prueba alguno de estos parametros

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    30 nov, 05
    Mensajes
    884
    Poder de Reputación
    22
    pues ya he conseguido saberlo
    line-height:150%;

  4. #4
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    10 ago, 05
    Ubicación
    Cartagena, España
    Mensajes
    3,721
    Poder de Reputación
    10
    Guau, que cosa más rara... voy a probarlo a ver.

    Por cierto, si funciona, asegurate de que también se ve como quieres en otros navegadores (Explorer, Opera, Navigator, Firefox....)

  5. #5
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    10 ago, 05
    Ubicación
    Cartagena, España
    Mensajes
    3,721
    Poder de Reputación
    10
    A mi no me sale como tu propones Solidaria. Quizás funcione en una web concreta, con otros parámetros, pero así sin más no lo centra.

    Probad esto otro a ver que os sale:

    #catalina h1 { margin: 5% 0 5% 0 ; }
    Si el H1 está dentro de otro DIV, ponedle ese nombre en lugar de Catalina. Esto parece que deja un margen del 5% por arriba y por debajo del H1 y al final queda centrado. Si se os agranda demasiado la altura del DIV, probad a ponerle valores menores de 5 hasta conseguir la altura que querais.

    Al menos en Explorer y en Opera se ve bien.

    Decidme algo!

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    24 sep, 05
    Mensajes
    118
    Poder de Reputación
    18
    Hola,
    Enhorabuena por la lección de las capas, se entiende muy bien. He intentado centrar verticalmente un texto dentro de una capa y la verdad es que es demasiado difícil para lo que es. He estado googleando y me da la impresión que no está muy claro la mejor forma de hacerlo.
    Unos decían que si pones display: table-cell, la capa adquiere propiedades de celda y puedes aplicarle vertical-align. Pero no me ha funcionado
    Lo único que probando ha funcionado ha sido lo que ha dicho Solidaria. Mi div era una barra y tenía una altura (height) de 40px y he puesto lo siguiente:
    line-height: 41px; ¡Y funcionaba!
    Lo que ha dicho Jorgens en Firefox parece que no funciona.
    Yo además de éste tengo otro problema y es que no se centrar la capa que engloba a todas. He utilizado text-align pero no funciona ¿Cómo se hace?
    Muchas gracias por adelantado.
    Un Saludo

  7. #7
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    10 ago, 05
    Ubicación
    Cartagena, España
    Mensajes
    3,721
    Poder de Reputación
    10
    Te refieres a centrarla horizontalmente? Si es así se hace de este modo:

    En la Hoja de Estilo ponle a BODY esto

    BODY { lo-que-ya-tengas..... ;TEXT-ALIGN:center; }
    Y al DIV que quieres centrar esto otro:

    .............. ; MARGIN:0px auto 0px auto ; WIDTH:XXXXpx}
    (XXXX es la anchura que deseas darle, es obligado definirla en este caso para que funcione el centrado)
    Si tienes un DIV que engloba todo el contenido, ponselo a ese y todo queda centrado.

    La única salvedad, es que como ahora todo queda centrado, si algún div lo quieres con alineación a la izquierda, derecha o justificado, has de ponerle TEXT-ALIGN:left (o right o justify) al que quieras cambiar.

    También es muy importante definirle un ancho al DIV en el que pongas el MARGIN que te he comentado arriba. Si no seguramente no funcione en todos los navegadores.

    Creo que así se queda centrado en cualquier navegador, pero avisarme si estoy equivocado.

    Un saludo y perdón si os he confundido. No se de todo je je je.

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    24 sep, 05
    Mensajes
    118
    Poder de Reputación
    18
    Gracias Jorgens eso me funciona bien.
    Lo que no consigo es alinear el texto verticalmente, la forma que antes dijiste no me funciona. Con lo fácil que era con las tablas.
    Un saludo

  9. #9
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    30 nov, 05
    Mensajes
    884
    Poder de Reputación
    22
    Antes de leer este tema, estuve probando con vertical-align y solo consegui que me centrara cajas y botones, lo de line-height es lo que mejor me ha funcionado pero claro hay q ir cambiando el porcentaje por q no es muy exacto.

    respecto a centrar el div en firefox no me hace caso al text-align:center :(


    hay una web muy buena sobre css que la pondre si jorgens me permite :) si no es asi quitala si quieres.

    http://www.ignside.net/man/css/clases.php

    y ya puestos otra
    http://www.htmlhelp.com/es/reference/css/

    y ya puestos otra mas
    http://www.sidar.org/recur/desdi/tra...pseudo-classes

    y otra
    http://www.cristalab.com/tutoriales/5-css-y-xhtml/

    tengo muchas pero no tengo tiempo para leerlas jajajajaja.


    un saludo

  10. #10
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    16 jun, 11
    Mensajes
    1
    Poder de Reputación
    0

    Centrar texto verticalmente

    solo hay un pequeño problema, el alto de la div debe de ser estatico.

    height:50px;
    line-height:50px;

    Esto funciona perfectamente. saludos ;D.

  11. #11
    Recien Llegado! Habitante
    Fecha de Ingreso
    28 dic, 10
    Mensajes
    21
    Poder de Reputación
    11

    Centrar verticalmente un texto dentro de una capa

    Hola a todos y para el q siga buscando....tras mucho buscar y poco encontrar prove lo siguiente para centrar verticalmente un texto dentro de una capa (es una chorrada):

    Primero, usas padding: como veras la capa se desplaza hacia abajo la misma cantidad "Xpx" de padding q le hayas puesto, pues ahora...
    Segundo, reduce la altura de dicha capa la misma cantidad que hayas puesto de padding.


    Por ejemplo:

    tienes esta capa:
    <div id="capapruebapadding"><a href="#">hola manolo ljasd lsdklks</a></div>

    y este CSS
    #capapruebapadding {background-color:black; color:white; width:100px; height:100px; border: 4px solid yellow; margin:0px; float:left;}


    al estilo CSS le añades y cambias lo siguiente: (lo he puesto en mayusculas pa que se vea)

    #capapruebapadding {background-color:black; color:white; width:100px; height:70PX; border: 4px solid yellow; margin:0px; float:left; PADDING:30px 0px 0px 0px;}

    y se centra el texto verticalmente. Seguramente haya algo mejor pero es lo unico q he conseguido sacar.

Temas Similares

  1. ¿Cómo centrar un texto en la capa (layer)?
    Por yaka_1989 en el foro Foro General
    Respuestas: 1
    Último Mensaje: 30/10/2009, 15:52
  2. Problema para centrar texto dentro de una capa
    Por Anne en el foro Webs con Capas o DIVS
    Respuestas: 6
    Último Mensaje: 24/06/2009, 09:33

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •