Foros del Web » Creando para Internet » CSS »

Cuadrado rojo con contenido centrado

Estas en el tema de Cuadrado rojo con contenido centrado en el foro de CSS en Foros del Web. Hola, Estoy intentando pero no me sale, o mejor dicho, no se realizar con css una cosa bastante básica: un cuadrado rojo (esto se hacerlo) ...
  #1 (permalink)  
Antiguo 02/10/2009, 03:17
 
Fecha de Ingreso: noviembre-2007
Mensajes: 73
Antigüedad: 10 años
Puntos: 2
Cuadrado rojo con contenido centrado

Hola,
Estoy intentando pero no me sale, o mejor dicho, no se realizar con css una cosa bastante básica: un cuadrado rojo (esto se hacerlo) y luego que el texto que escriba, por ejemplo un número quede perfectamente centrado.


Yo he hecho esto:
<div style="background-color:#CC0000; height:35px; width:35px; font-size:24px; text-align:center;">90</div>

A este código si le añades margin-top, bottom, etc. No consigo cuadrarlo. Se me queda el contenido más próximo al extremo superior que al inferior.

De los lados (derecha e izquierda) con text-align:center si se consigue centrar, pero no "por su altura".

¿Alguna idea?
Gracias
  #2 (permalink)  
Antiguo 02/10/2009, 05:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cuadrado rojo con contenido centrado

Podrías utilizar los valores de display "table | table-group..." pero tendrías problemas con algún ie.

Así que lo mejor que podrías ir por otra vía, el padding.
En vez de dar altura a la caja, márcale un padding superior e inferior iguales. (padding: 20px 0;) por ejemplo. Siempre y cuando tu diseño lo permita.

Estaría bien que ampliases información sobre lo que quieres centrar en esa caja (un párrafo de texto, enlaces, ...)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 02/10/2009, 06:00
 
Fecha de Ingreso: noviembre-2007
Mensajes: 73
Antigüedad: 10 años
Puntos: 2
Respuesta: Cuadrado rojo con contenido centrado

El contenido que quiero centrar realmente son 2 números, el caso tal cual lo he expuesto en código.

He probado añadiendo padding: 5px 5px 5px 5px quitándo las definiciones de alto y ancho y no funciona correctamente, se crea un rectángulo demasiado alargo.

Si mantengo las definiciones en IE funciona, pero en Firefox, Chrome, entre otros no.

Hace un rato he probado esto:
<div style="
background-color:#CC0000;
width:35px;
height: 35px;
font-size:24px;
text-align:center;
color: #ffffff;
font-family: Arial;
">
<div style="
position: relative;
top: 5px;
">90
</div>

</div>

He añadido esto que señalo, un div dentro con posicion relativa respecto de la ubicación del anterior y dandole un top, que era donde fallaba y así se visualiza correctamente.

No se si habrá forma mejor, pero es lo único que he conseguido hacer.
  #4 (permalink)  
Antiguo 02/10/2009, 06:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cuadrado rojo con contenido centrado

Desconozco la naturaleza de esos números. ¿Son datos tabulados? pues puedes utilizar una tabla para presentarlos, y ahí no tendrías problemas de centrado y alineación.
También puede que sea correcto alojarlos en una lista (ul/li).
Pero centrándome en el código que facilitas, sería algo así como:
Código css:
Ver original
  1. .texto {width: 35px; margin: 0 auto; background: #CC0000; padding: 5px;}
  2. .texto p {color: #f5f5f5; text-align: center;font-size: 24px; font-family: verdana, sanserif;}
Código html:
Ver original
  1. <div class="texto">
  2. <p>90</p>
  3. <p>60</p>
  4. </div>

Pero debido a lo que te decía antes, posiblemente surjan situaciones donde esa solución no sea válida.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 18:36.