3 Cajas con contenido (imagen y texto)

[Bombolone]

Hola a todos,

Antes que nada quería agradecerles por la buena onda y dedicación del foro, me ayudó muchísimo, jamás pregunte nada dado que encontraba lo que buscaba, pero hoy particularmente me surgió una duda y hace poco que arranco con CSS y realmente me cuesta ya que dispongo de poco tiempo como para un curso, quizás con un empujoncito de su lado pueda arrancar con ciertos conceptos y poder empezar a desarrollar y escaparme de las tablas html.

Tengo que hacer una web completamente en CSS, pude armar la estructura centrada, y adapte un slide en javascript sin problemas, el tema que luego tengo que poner 3 bloques de contenido, solía hacerlo con tablas, deamweaver armas 1 row con 3 columnas dentro de cada row se divide en 2, en una va titulo y bajo texto y se soluciona muy facilmente, peroo, tengo que hacerlo en css.

Intenté armar un contenedor, luego crear un div y alinearlo y se me rompe todo se me va para cualquier lado, se leer el css, se modificar css, entiendo casi todo el concepto, pero me cuesta muchísimo entender la logica o desarrollar algo tan simple como esto:

Es un contenedor, el cual posee 3 cajas , cada uno tendría un título, pero estos titulos son .png ya que es un titulo acompañado de una imagen, y luego debajo solo texto.

algo asi:




Podría alguien darme una mano? muchísimas gracias de antemano! saludos

[cristian_cena]

aquí un ejemplo, luego podrías remplazar los h2 por imágenes.

[Bombolone]

Cristian sos un groso! mil gracias! ya mismo me pongo a adaptarlo y comento como quedo!

saludos!

[Bombolone]

Tengo una pequeña duda, por ejemplo, tengo un div grandote que sería el contenedor, (si ven la imagen que puse arriba seria el fondo blanco, lo gris es el background), en ese div puse un slider en javascript que quedo centrado porque pertenece a ese div obviamente, luego puse estos botones que Cristian me donó, los adapto, pero me quedan alineados a la izquierda, entiendo que para que quede todo en lo mismo deberia ponerlos dentro del contenedor, el tema es que , cada seccion por asi decirlo quiero que lleve un respectivo fondo, y me sucede que para esto tengo que poner una imagen de bg y poner que el ancho sea 100%, pero me queda alineado a la izquierda, como podría hacer que quede alineado central?

saludos!

[cristian_cena]

No entiendo esto

Iniciado por Bombolone

entiendo que para que quede todo en lo mismo deberia ponerlos dentro del contenedor

Si queres centrar horizontalmente algo basta con:

Código CSS:

elemento{margin:0 auto;}
 

Para usar fondos centrados podes hacer algo así:

Código CSS:

background:url("ruta/imagen.xxx") center center no-repeat;
/*donde center puede tomar los valores: top/right/center/bottom y donde el 1er center corresponde al ejeX y el 2do al ejeY*/
 

O bién apilar capas con z-index
css3 ya permite múltiples backgrounds pero hay un palo en la rueda en la evolución de los estándares, es ese que lo pintan en rojito aca jaja