problemas al centrar imagenes

lamenenchu · #1 (**permalink**) 29/05/2015, 11:50

Hola, soy nueva en el diseño web.
Tengo un problema a la hora de centrar mis imagenes horizontalmente.
Alguien puede decirme dónde está el error?
Debo especificar alguna clase o div?

Gracias

----------------------------------------------------------------------------
<body>

<section>
<img src="img/fondo.jpg" alt="fondo">
</section>
<section>
<article>
<h1>Quienes somos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatum, eaque libero molestias? Laborum consequuntur minus autem pariatur, aperiam, totam libero consequatur recusandae nulla doloremque repudiandae hic, consectetur! Mollitia, ab!</p>
</article>
<article>

<img src="http://lorempixel.com/320/200/food/1" alt="camiseta">
<img src="http://lorempixel.com/320/200/food/2" alt="carta"> <img src="http://lorempixel.com/320/200/food/3" alt="carta"></article>

</section>
</body>
------------------------------------------------------
css:

section {
margin: 0 auto;
width: 93,75%;

}
section img {
width: 100%;

}
section article {
box-sizing: border-box;
width: 85%;
text-align: justify;
padding: 3em;
font-family: 'Nunito', sans-serif;
font-weight: 100;

margin: 0 auto;

}
article h1 {
font-family: 'Times new roman', serif;
font-size: 2em;
}

article img {

display: inline-block;
width: 20%;
padding: 1%;
margin: 0 auto;
border: 1px solid #333;
text-align: center;
background-color: yellow;

}
section aside {
clear: both;
width: 96%;
background-image: url(../img/fabric_plaid.png);
background-repeat: repeat-x, repeat-y;
background-color: dimgray;
margin: 0 auto;
padding: 1% 2%;

}

fede5426 · #2 (**permalink**) 29/05/2015, 12:15

Una opción para centrar tus imágenes es que le asignes una clase al article que las contiene, y con css le colocas text-align:center;

Código HTML:

Ver original<article class="imagenes">
 
   <img src="http://lorempixel.com/320/200/food/1" alt="camiseta">
   <img src="http://lorempixel.com/320/200/food/2" alt="carta"> 
   <img src="http://lorempixel.com/320/200/food/3" alt="carta">
 
</article>

Código CSS:

Ver originalarticle.imagenes{
    text-align:center;
}

Otra opción es crear un div dentro de ese article, darle un ancho especifico (en este caso, el ancho deberia ser igual al tamaño de 3 imágenes) y a ese div asignarle los margenes automáticos. Dentro de ese div irían las imágenes.

lamenenchu · #3 (**permalink**) 29/05/2015, 12:28

Cita:

Iniciado por fede5426

Una opción para centrar tus imágenes es que le asignes una clase al article que las contiene, y con css le colocas text-align:center;

Código HTML:

Ver original<article class="imagenes">
 
   <img src="http://lorempixel.com/320/200/food/1" alt="camiseta">
   <img src="http://lorempixel.com/320/200/food/2" alt="carta"> 
   <img src="http://lorempixel.com/320/200/food/3" alt="carta">
 
</article>

Código CSS:

Ver originalarticle.imagenes{
    text-align:center;
}

Otra opción es crear un div dentro de ese article, darle un ancho especifico (en este caso, el ancho deberia ser igual al tamaño de 3 imágenes) y a ese div asignarle los margenes automáticos. Dentro de ese div irían las imágenes.

Muchisimas gracias.... en estos momentos eres Dios!!!!!

(con la primera opción ya lo he conseguido).