Centrar imagen en un div que es más pequeño.

PabloManuel · #1 (**permalink**) 17/09/2013, 05:31

No hay manera.

Os esplico, necesito esto:

Tengo que centrar una imagen dentro de un Div, siempre la imagen será más ancha que el div y con un algo fijo de 200px.

He probado de todo, margin auto y etc.

y lo único que consigo es esto:

Así queda con el margen automático

PabloManuel · #2 (**permalink**) 17/09/2013, 05:33

Este es el div principal

Código CSS:

Ver originalec_div_art {
width: 176px;
margin: 4px 2px;
position: relative;
overflow: hidden;
background-color: white;
float: left;
min-height: 325px;

y esta la imagen:

Código CSS:

Ver originaldisplay: block;
max-height: 176px;
z-index: 1;
margin: auto;

el alto fijo son 176px, perdón.

madman_18 · #3 (**permalink**) 18/09/2013, 09:40

Si siempre vas a tener una imagen en ese bloque, podrías probar a meter un text-align en el div a ver cómo se comporta¿?

PabloManuel · #4 (**permalink**) 19/09/2013, 03:17

text-align: center;

Nada igual, ni se inmuta.

carscx · #5 (**permalink**) 20/09/2013, 11:48

Prueba a ponerle a la imagen, position: relative;

De esa forma tendrá relación al div. Y empezara a tomar los márgenes.

Rafael · #6 (**permalink**) 21/09/2013, 07:30

Más bien, mete la imagen como fondo css con background. Ahí si puedes poner la posición centrada del div que la contiene.

PabloManuel · #7 (**permalink**) 23/09/2013, 03:15

Cita:

Iniciado por carscx

Prueba a ponerle a la imagen, position: relative;

De esa forma tendrá relación al div. Y empezara a tomar los márgenes.

nada... igual.

PabloManuel · #8 (**permalink**) 23/09/2013, 03:16

Cita:

Iniciado por Rafael

Más bien, mete la imagen como fondo css con background. Ahí si puedes poner la posición centrada del div que la contiene.

No puedo, el nombre de la imagen lo saco después de una consulta a la base de datos y la hoja CSS está a parte, la página está en Xhtml Strict

Tan complicado es?

faillure · #9 (**permalink**) 23/09/2013, 10:08

declarada como bloque
left: 50%
y la trasladas en el eje x el -50% (transform: translatex(-50%);)

PabloManuel · #10 (**permalink**) 23/09/2013, 14:10

esto último no lo he visto en mi vida.

Código CSS:

Ver original.ec_div_art>img {
display: block;
max-height: 176px;
z-index: 1;
left: 50%;
transform: translatex(-50%);

La última línea no la entiende el navegador.

pzin · #11 (**permalink**) 23/09/2013, 14:44

Usa los prefijos propietarios, depende del navegador y su versión, algunos lo necesitan.

Código CSS:

Ver original-webkit-transform: translatex(-50%);
-moz-transform: translatex(-50%);
-ms-transform: translatex(-50%);
-o-transform: translatex(-50%);
transform: translatex(-50%);

PabloManuel · #12 (**permalink**) 02/10/2013, 10:48

Lo dejé por imposible, pero ahora tengo que volver a esta parte y terminarlo, con el código anterior algo hace, este es el resultado:

PabloManuel · #13 (**permalink**) 02/10/2013, 10:49

centra la imagen en el lateral del div justamente, parece que coge como referencia un left:0px del div o yo que sé

me tiene hablando solo.

pzin · #14 (**permalink**) 02/10/2013, 11:46

Te falta indicar una posición diferente a estática —por defecto— para que left funcione.

Código CSS:

Ver original.ec_div_art > img {
  position: relative;
}

PabloManuel · #15 (**permalink**) 02/10/2013, 13:21

que va tío, igual. se queda como el último gráfico.

PabloManuel · #16 (**permalink**) 02/10/2013, 13:23

pero como una cosa tan tonta puede ser tan complicada.

clase entera:

Código CSS:

Ver original.ec_div_art {
    width:176px;
    margin: 4px 2px;
    position:relative;
    overflow:hidden;
    float:left;
    min-height:325px;
}
.ec_div_art:hover{
    box-shadow: 0px 0px 10px 0px #777777;
    border-radius:5px;
 
}
.ec_div_art>p{
    font: normal normal bold 1.3em verdana;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    margin: 0;
    padding: 0;
    width: 64px;
    height: 64px;
    background: url('Images_sys/ico64_oferta.png') no-repeat left;
    line-height: 55px;
    color: white;
    z-index: 2;
    text-indent: 24px;
    opacity:0.8;    
}
.ec_div_art > span{
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    margin: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 55px;
    z-index: 3;
}
 
.ec_div_art:hover > span{
    display:block;
}
 
.ec_div_art > a > img{
    display: block;
    max-height: 176px;
    z-index:1;
 
}
.ec_div_art>div{
    display:none;
    position:absolute;
    bottom: 150px;
    left: 5px;
    z-index:3;
}
.ec_div_art:hover > div{
    display:block;
}
.ec_div_art > div > ul{
    list-style: none;
    color:white;
 
}
.ec_div_art > div > ul li{
    line-height:20px;
    background-color:black;
    margin:3px;
    padding:2px;
    border-radius:3px;
    font-size: 0.9em;
    
}
 
.ec_div_art > ul{
    text-align:center;
    position:absolute;
    bottom:5px;
    padding: 2px;
}
 
.ec_div_art > ul li{
    margin:10px 0;
}
 
.ec_div_art > ul li span{
    text-decoration:line-through;
}
 
.ec_div_art > ul li p{
    font-size:1.2em;
    font-weight:bold;
}

y este es el sub que va haciendo las "cajitas" de los artículos:

Código ASP:

Ver original<%
Sub EC_formatoart_1 ()
    %>
    <div class="ec_div_art">
        <%
        'Muestra el icono de la oferta con el porcentaje.
        If MatrizPVP(2) <> 0 Then
            %>
            <p><%=MatrizPVP(2)%>%</p>
            <%
        End If
 
        If ComprobarLogico("EC_Config", "VendersinStock", "Idreg=1") = 1 Or Rs("Stock") > 0 Then
            %>
            <span><a href="<%=Nombre_Pagina%>?proceso=addcesta&id=<%=Rs("Id")%>"><img title="Añadir a la cesta" alt="Añadir a la cesta" src="images_sys/ico32_cesta.png" /></a></span>
            <%
        End If
        
        
        %>
        <a href="<%=Nombre_Pagina%>?proceso=verficha&id=<%=Rs("Id")%>"><img alt="Foto 1" src="<%=ExisteFoto("FotosART", Rs("Id") & "1.jpg")%>" /></a>
        <div>
            <ul>
                <%
                'Muestra las características al pasar si las hay.
                If Rs("Fabricante") <> 1 Then Response.Write "<li>Fabricante: " & ComprobarLogico("EC_Fabricante", "Nombre", "Id=" & Rs("Fabricante")) & "</li>"
                If Rs("Talla") <> 1 Then Response.Write "<li>Talla: " & ComprobarLogico("EC_Talla", "Nombre", "Id=" & Rs("Talla")) & "</li>"
                If Rs("Color") <> 1 Then Response.Write "<li>Color: " & ComprobarLogico("EC_Color", "Nombre", "Id=" & Rs("Color")) & "</li>"
                %>
            </ul>
        </div>
        <ul>
            <li><b>[<%=Rs("Codigo")%>]</b><%=Rs("Descripcion")%></li>
            <%
            If MatrizPVP(2) <> 0 Then
                %>
                <li><p><span><%=Precio%></span></p></li>
                <li><p><%=PrecioDTO%></p></li>
                <%
            Else
                %>
                <li><p><%=Precio%></p></li>
                <%
            End If
            %>
            
            <li title="<%=MatrizPorte(2)%>">(Envío <%=PorteUser%>)</li>
            <%
            'Muestra el stock si hay control de existencias.
            If ComprobarLogico("EC_Config", "VendersinStock", "Idreg=1") = O Then
                %>
                <li>
                    <%
                    If EC_ObtenerStock(Rs("Id")) > 1 Then
                        Response.Write "Quedan " & EC_ObtenerStock(Rs("Id")) & " Unidades"
                    ElseIf EC_ObtenerStock(Rs("Id")) = 1 Then
                        Response.Write "Queda " & EC_ObtenerStock(Rs("Id")) & " Unidad"
                    ElseIf EC_ObtenerStock(Rs("Id")) < 1 Then
                        Response.Write "Sin Existencias"
                    End IF
                    %>
                </li>
                <%
            End If
            %>
        </ul>
    
    </div>  
    
    <%
End Sub
%>

PabloManuel · #17 (**permalink**) 02/10/2013, 13:25

la imagen como veis está dentro del div, después de un span y un a

pzin · #18 (**permalink**) 02/10/2013, 13:38

¿Puedes publicar el HTML resultante en lugar de código ASP?

PabloManuel · #19 (**permalink**) 02/10/2013, 13:40

yeaaaahhh

Código HTML:

Ver original<div class="ec_div_art">
        
            <span><a href="ec_index.asp?proceso=addcesta&amp;id=18"><img title="Añadir a la cesta" alt="Añadir a la cesta" src="images_sys/ico32_cesta.png"></a></span>
            
        <a href="ec_index.asp?proceso=verficha&amp;id=18"><img alt="Foto 1" src="FotosART/181.jpg"></a>
        <div>
            <ul>
                <li>Fabricante: INTEL </li>
            </ul>
        </div>
        <ul>
            <li><b>[10028]</b>80GB SSD SERIE 320 INTEL PACK KIT CLON.</li>
            
                <li><p>136,50€ + IVA</p></li>
                
            
            <li title="No tenemos su dirección de envío, este importe es el general.">(Envío 6,22€ + IVA)</li>
            
                <li>
                    Quedan 87 Unidades
                </li>
                
        </ul>
    
    </div>

PabloManuel · #20 (**permalink**) 02/10/2013, 13:41

toy-subriendo

El div principal lo he probado con todos los position posibles.

pzin · #21 (**permalink**) 02/10/2013, 13:47

No tienes nada aplicado de lo que se te ha dicho. Y lo que se te ha dicho funciona perfectamente bien:

Código CSS:

Ver original.ec_div_art > a > img {
  position: relative;
  left: 50%;
  display: block;
  max-height: 176px;
  z-index:1;
  -webkit-transform: translatex(-50%);
}

Está para que funcione en Opera/Chrome/Safari, para los demás navegadores tendrás que añadir los demás prefijos propietarios.

PabloManuel · #22 (**permalink**) 02/10/2013, 13:51

ostras perdona, es que lo he modificado directamente en Chrome y al cerralo y abrirlo pues he perdido lo hecho.

Pero sí.. oleeeeeee... me faltaba poner left: 50%;

Te daba besos como merengues hacen falta para partir una campana (pero sin mariconismo)

Muchas gracias, me ha tenido amargado.

pzin · #23 (**permalink**) 02/10/2013, 14:20

Los besos a faillure, que fue quien dio la solución.