Foros del Web » Creando para Internet » CSS »

Centrar texto verticalmente con alto fijo maximo

Estas en el tema de Centrar texto verticalmente con alto fijo maximo en el foro de CSS en Foros del Web. Hola Tengo el siguiente problema Necesito varios div de un tamaño fijo, que contienen texto, este texto debe aparecer centrado verticalmente. Si hay mas texto ...
  #1 (permalink)  
Antiguo 23/05/2012, 09:14
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 3 meses
Puntos: 0
Centrar texto verticalmente con alto fijo maximo

Hola

Tengo el siguiente problema

Necesito varios div de un tamaño fijo, que contienen texto, este texto debe aparecer centrado verticalmente.

Si hay mas texto del que cabe en el div este texto de mas no se debe mostrar.

Tengo el siguiente codigo:

Código PHP:
<div id="div">HOLA</div>

#div{
    
border1px solid black;
    
displaytable-cell;
    
vertical-align:middle;
    
width300px;
    
height40px;
        
overflow:hidden;

El problema es que al poner el display: table-cell para centrarlo verticalmente, si el texto es más grande que el contenedor, el div crece a lo alto y no me respeta el alto fijado.

Alguien sabe como solucionarlo?

Gracias
  #2 (permalink)  
Antiguo 23/05/2012, 09:27
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años, 1 mes
Puntos: 47
Respuesta: Centrar texto verticalmente con alto fijo maximo

Prueba :
Código HTML:
Ver original
  1.     #contenedor {
  2.         height:80px;
  3.         background-color:#993333;
  4.         width:300px;
  5.         position:absolute;
  6.     }
  7.    
  8.     #mensaje {
  9.         position:relative;
  10.         height: 20px;
  11.         top:50%;
  12.         margin-top:-10px;
  13.         background-color:#006699;
  14.         left:20px;
  15.         width:280px;
  16.     }
  17. <div id="contenedor">
  18.     <div id="mensaje">Hola</div>
  19. </div>

Saludos
  #3 (permalink)  
Antiguo 23/05/2012, 09:41
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Centrar texto verticalmente con alto fijo maximo

No hace lo que quiero.

Lo que quiero es que si hay una linea salga el texto centrado, si no cabe y el texto se ve en dos lineas sale en 2, y por el tamaño que tengo ya no se ha de centrar.
Y si hay más de 3 lineas que solo se vean las 2 primeras.
  #4 (permalink)  
Antiguo 23/05/2012, 10:21
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años, 1 mes
Puntos: 47
Respuesta: Centrar texto verticalmente con alto fijo maximo

entonces prueba ponerle a tu div con el texto overflow:hidden;
  #5 (permalink)  
Antiguo 24/05/2012, 09:05
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Centrar texto verticalmente con alto fijo maximo

Muchas gracias al final lo he solucionado así.

Código PHP:
#contenedor{
    
border1px solid black;
    
width300px;
    
height40px;
    
overflow:hidden;
}
#contenido{
    
displaytable-cell;
    
vertical-align:middle;
    
height40px;


Etiquetas: alto, fijo, maximo, tamaño, 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 17:17.