Foros del Web » Creando para Internet » CSS »

centrar texto en caja

Estas en el tema de centrar texto en caja en el foro de CSS en Foros del Web. Hola, Tengo que centrar un texto tanto vertical como horizontalmente en un div. Alguien sabe cómo hacerlo?. Saludos!...
  #1 (permalink)  
Antiguo 04/02/2011, 17:14
 
Fecha de Ingreso: mayo-2010
Mensajes: 414
Antigüedad: 14 años, 6 meses
Puntos: 2
centrar texto en caja

Hola,
Tengo que centrar un texto tanto vertical como horizontalmente en un div.
Alguien sabe cómo hacerlo?.
Saludos!
  #2 (permalink)  
Antiguo 04/02/2011, 17:44
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: centrar texto en caja

Demasiadas incógnitas para resolver la ecuación.
¿El div tiene tamaño fijo, porcentual, ... o se ajusta en altura al contenido?
¿El texto es siempre de menor altura que el div?
¿El texto tiene siempre el mismo tamaño o puede variar?
Para centrar el texto en horizontal puedes usar un párrafo con margin: x auto, sustituyendo la x por el margen que prefieras (si lo prefieres usa margin-left:auto y margin-right:auto).
Para centralo en vertical debes contestar las preguntas anteriores. Mejor aún sería poder leer tu código HTML y CSS.
  #3 (permalink)  
Antiguo 04/02/2011, 17:48
 
Fecha de Ingreso: mayo-2010
Mensajes: 414
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: centrar texto en caja

El texto es mas chico que el div, y el div tiene medidas fijas en pixeles.
  #4 (permalink)  
Antiguo 04/02/2011, 18:05
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: centrar texto en caja

como dijo el compañero sanxuan seria mejor ver tu código así solo estamos con adivinanzas,

un ejemplo vago considerando que tu div solo contenga una linea de texto se podría centrar con

Código CSS:
Ver original
  1. .contenedor{width:300px;height:40px;text-align:center;line-height:40px;}
text-align:center; -> centrado horizontal
line-height:40px; -> centrado vertical
  #5 (permalink)  
Antiguo 04/02/2011, 18:23
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: centrar texto en caja

Puedes darle al div las propiedades display:table-cell, text-align:center y vertical-align:middle.

div.contenedor {
background: #F112;
display: table-cell;
text-align: center;
vertical-align: middle;

width: 500px;
height: 200px;
}

p.texto {
background: #FFF;
margin: 0 auto;
padding: 10px;
width: 200px; /* si el párrafo no tiene un ancho, no tiene sentido centrarlo */
}

<div class="contenedor">
<p > Algo de texto centrado</p>
</div>
  #6 (permalink)  
Antiguo 05/02/2011, 12:04
 
Fecha de Ingreso: mayo-2010
Mensajes: 414
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: centrar texto en caja

Gracias por la rapidez de la respuesta, me sirvio de mucho ambas respuestas.

Etiquetas: caja
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 21:35.