[SOLUCIONADO] posicionamiento y centrado img y p

[ignacio85r]

buenas gente.
aqui ando, complicado y espero que me puedan orientar un poco.

la cuestion es la siguiente: tengo 4 y magenes y 4 textos y necesito que queden tipo cuadricula ocea, 2 img arriba con sus respectivos textos y 2 abajo con sus otros 2 textos pero no logro hacerlo ya que me quedan centrados y uno debajo de otro(texto, img, texto, img...).

este es el codigo... html y css .

Código HTML:

 <article>
            <p>Recetas Tipicas.</p>
            <img src="imagenes/empanadas.jpg" alt="imagen de empanadas">
            <p>Recetas Extrajeras.</p>
            <img src="imagenes/tacos.jpg" alt="imagen de tacos mexicanos">
            <p>Postres Argentinos.</p>
            <img src="imagenes/postres.jpg" alt="imagen de postres argentinos">
            <p>Tragos y bebidas.</p>
            <img src="imagenes/tragos.jpg" alt="imagen de bebidas y tragos">
        </article> 

Código CSS:

section {
    max-width: 100%;
    min-width: 15%;
    margin: 0px auto;
    padding: 0px 0px;
}
 
article {
    display: inline-block;;
    max-height: auto;
    max-width: 250px;
    min-height: auto;
    min-width: auto;
    margin: 0px auto;
}
 
article img {
    display: inline-block;
    height: 100%;
    max-height: 100%; 
    max-width: 100%;
    min-height: 0% ;
    min-width: 0%;
    text-align: center;
    width: 100%;
}
 
article p {
    display: inline-block;
}
 

nose si para estos casos uso un article por texto e imagen dando un total de 4 articulos o va todo en uno solo

desde ya muchas gracias

[djsampe]

Hola,

Yo pondría cada texto+imagen dentro de un article, ademas, englobaría todos los <article> dentro de un <section>, a ese section le das el ancho que quieras y luego a article 50% de ancho para que quepan 2 por fila:

Código:

<style>
		
    section {
        width: 100%;
        min-width: 15%;
        margin: 0px auto;
        padding: 0px 0px;
    }
     
    article {
        display: inline-block;;
        max-height: auto;
        width: 50%;
        min-height: auto;
        min-width: auto;
        margin: 0px auto;
    }
     
    article img {
        display: inline-block;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        min-height: 0% ;
        min-width: 0%;
        text-align: center;
        width: 100%;
    }
     
    article p {
        display: inline-block;
    }
	
	</style>

Código:

<section>
	<article>
		<p>Recetas Tipicas.</p>
		<img src="imagenes/empanadas.jpg" alt="imagen de empanadas">
	</article>
	
	<article>
		<p>Recetas Extrajeras.</p>
		<img src="imagenes/tacos.jpg" alt="imagen de tacos mexicanos">
	</article>
	
	<article>
		<p>Postres Argentinos.</p>
		<img src="imagenes/postres.jpg" alt="imagen de postres argentinos">
	</article>
	
	<article>
		<p>Tragos y bebidas.</p>
		<img src="imagenes/tragos.jpg" alt="imagen de bebidas y tragos">
	</article> 
</section>

[ignacio85r]

eso no funciono... probe con las sugerencias que me aconsejaste y queda todo igual.

[ignacio85r]

ahora si, funciono! sin querer cuando coloque los articulos de nuevo falto cerrar uno jejejeeee perdon!! gracias por tu ayuda djsampe!! :D

saludos!

tema cerrado!