Foros del Web » Creando para Internet » Diseño web »

Como centrar verticalmente en un div position absolute

Estas en el tema de Como centrar verticalmente en un div position absolute en el foro de Diseño web en Foros del Web. Hola saludos a todos, espero que me puedan ayudar con esta duda probablemente ya los diseñadores han tenido este problema antes puesto que es el ...
  #1 (permalink)  
Antiguo 04/06/2012, 15:20
Avatar de shujidan  
Fecha de Ingreso: abril-2011
Mensajes: 121
Antigüedad: 13 años, 8 meses
Puntos: 5
Como centrar verticalmente en un div position absolute

Hola saludos a todos, espero que me puedan ayudar con esta duda probablemente ya los diseñadores han tenido este problema antes puesto que es el que generan los programas para diseño web, me refiero a los divs con posicion absoluta.
El problema es centrar verticalmente el texto dentro de un div (el mismo espacio arriba y abajo), alguien sabe como se hace?

Código HTML:
Ver original
  1. <div align="center"
  2.        style="background-image:url(images/webtemplate1_08.jpg);
  3.        position:absolute; left:126px; top:67px; width:143px; height:37px;">
  4.     textodentrodeldiv
  5. </div>

He encontrado una forma aunque es muy cansado estar envolviendo todo el texto en un span
<span class="">textodentrodeldiv</span>
y agregarle las propiedades display: table-cell;vertical-align: middle ademas que para cada div debo agregar tambien display:table
Tengo cientos de divs es totalmente impractico estar haciendo esto para cada uno, espero que alguien sepa de un atributo en el div que me pueda ayudar :) y si hay alguna opcion que modifique el div con el dreamweaver pues mejor. Muchas gracias por su tiempo y espero que alguien me pueda ayudar.

Última edición por shujidan; 04/06/2012 a las 20:09
  #2 (permalink)  
Antiguo 04/06/2012, 21:16
Avatar de santaseo  
Fecha de Ingreso: mayo-2012
Ubicación: Argentina
Mensajes: 60
Antigüedad: 12 años, 7 meses
Puntos: 7
Respuesta: Como centrar verticalmente en un div position absolute

Proba con esta técnica usando CSS: http://librosweb.es/css/capitulo12/centrar_una_pagina_verticalmente.html

En el ejemplo centra una pagina, vos tendrías que aplicar tu ejemplo al texto.

O con la propiedad vertical-align también de CSS: http://librosweb.es/css/capitulo6/texto1.html

Aplica CSS =)
Espero te ayude. Mañana paso con mas tiempo.
Saludos.
__________________
@SantaSeoSF
  #3 (permalink)  
Antiguo 05/06/2012, 09:19
Avatar de shujidan  
Fecha de Ingreso: abril-2011
Mensajes: 121
Antigüedad: 13 años, 8 meses
Puntos: 5
Respuesta: Como centrar verticalmente en un div position absolute

vertical-align es para tablas y es el que estaba usando pero tendria que hacer muchas modificaciones para simular los divs como tablas y su contenido como celdas (el codigo actual no es nada corto por lo que es practicamente imposible).

Sobre la pagina que has mandado @santaseo, no puedo hacer el contenido con top:50% porque necesitaria estar dentro de un div position:relative para que lo tomara como punto de partida y el div se encuentra actualmente posicionado como absoluto.
De todas formas gracias por el apoyo :)


EDIT: Ya lo solucioné solo agregando la propiedad en style="line-height:--px" en el div contenedor con el mismo numero en pixeles que height. he pensado en sustituir height por line-height pero no se si haya algun efecto secundario despues aunque me facilitaria mucho la vida (solo tendria que agregar el prefijo line-).

Última edición por shujidan; 06/06/2012 a las 11:26

Etiquetas: diseño, position, verticalmente
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 07:29.