Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
7
respuestas

[Duda] Centrar imagen producto

# buenas tardes hice el codigo similar, pero con otro tipo de rubro pero las imagenes no me quedan centradas que puede ser?`

CSS header{ background: url(bg.jpg); border-radius: 0px 0px 12px 12px; padding: 20px 0; }

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position:absolute; top: 35px; right: 0px }

nav li{ display: inline; margin: 0 0 0 15px; }

nav a{ text-transform: uppercase; color: rgb(0,0,0); font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover{ color: aqua; text-decoration: underline; }

.productos{ width: 940px; margin: 0 auto; padding: 50px; }

.productos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: black 2px solid; border-radius: 0 25px 0 25px; }

.productos li:hover{ border-color: aqua; }

.productos li:active{ border-color: magenta; } .productos h2{ font-size: 30px; font-weight: bold; }

.productos li:hover h2{ font-size: 33px; }

.producto-descripcion{ font-size: 18px; margin-top: 3%; }

.footer{ text-align: center; background:url(bg.jpg); padding: 5px; }

.copyright{ color: black; font-size: 18px; margin: 20px; }

HTML

<body>
    <header>
        <div class="caja">
            <h1><img src="logo.png"></h1>
            <nav>
                <ul>
                    <li><a href= "index.html">INICIO</a></li>
                    <li><a href= "productos.html">PRODUCTOS</a></li>
                    <li><a href= "http://www.facebook.com/">CONTACTO</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <ul class="productos">
            <li>
                <h2>ALMANAQUES</h2>
                <img src="almanaque.png">
                <p class="producto-descripcion">Mignon o de pared</p>
            </li>
            <li>
                <h2>ANILLADOS</h2>
                <img src="anillado.jpg">
                <p class="producto-descripcion">Hasta 30, 90, 150 o 200 hojas</p>
            </li>
            <li>
                <h2>CANDY BAR</h2>
                <img src="candybar.jpg">
                <p class="producto-descripcion">Para 10, 15, 20, 30 o 50 personas con 5 golosinas cada uno</p>
            </li>
            <li>
                <h2>CUADERNOS</h2>
                <img src="cuadernos.jpg">
                <p class="producto-descripcion">Tamaños 10x15cm, 15x20cm, 20x30cm y 10x20cm</p>
            </li>
            <li>
                <h2>LIBRERÍA</h2>
                <img src="libreria.jpg">
                <p class="producto-descripcion">Llaveros, Fotos, Stickers, Tarjetas Personales y mas</p>
            </li>
            <li>
                <h2>VOLANTES</h2>
                <img src="volante.jpg">
                <p class="producto-descripcion">A color o BN, tamaños de 10x15cm, 15x20cm y 20x30cm, simple o doble faz</p>
            </li>
        </ul>
    </main>
    <footer class="footer">
        <img src="logo.png">
        <p class="copyright">&copy Copyright ![Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad](https://cdn1.gnarususercontent.com.br/6/515882/f0116465-ca62-462c-9c57-19afabcaa92d.png)  2023 - Todos los derechos reservados</p>
    </footer>
</body>
7 respuestas

Asi me quedan

Disculpa la molestia antes de responder ¿Podrías adjuntar las imagenes que utilizaste? así las descargo y pruebo el codigo para ayudarte mejor

Son 6 imagenes de 300x 300 pixeles

solución!
li img{
    width: 100%;
}

Con la instrucción que te paso arriba debería solucionarse todo el tema del centrado. Lo que es probable es que te queden desproporcionados los carteles ya que cada imagen tendrá un ancho distinto. Lo que estamos diciendo con esta instruccion es que cada imagen debe tener el ancho que tengan disponible en la caja y no el ancho propio de la imagen. Cualquier duda estoy a tu disposici

.productos li{
    box-sizing: content-box;
}

li img{
    width: 300px;
    height: 300px;
}

la otra opción con el width y height de cada imagen definido podés colocar esa propiedad dentro de productos li, y verás que la imagen se ajustará al contenedor que creo que es lo que esperabas.

Muchisimas gracias, ese codigo "li img{ width: 100%; } " no esta en los videos no??? bueno, lo que me faltaria es que el parrafo de la descripcion del producto si es corta, la caja queda corta y si es larga queda larga entonces no todas tienen la misma proporcion, eso se puede solucionar tambien???

https://prnt.sc/V4_qnAKsEvMr

Perdón la demora en responder, no el codigo ese lo aprendés más adelante. Pero te recomiendo estudiar las propied box-sizing desde este link que te dejo. Por lo otro dejame revisarlo y apenas tenga respuesta subo el codigo por aquí. Te dejo el link para que lo veas un ratito: https://developer.mozilla.org/es/docs/Web/CSS/box-sizing