Foros del Web » Creando para Internet » CSS »

Centrar verticalmente img dentro de un div con float

Estas en el tema de Centrar verticalmente img dentro de un div con float en el foro de CSS en Foros del Web. Buenas, he buscado por interne todas las posibilidades para centrar verticalmente una imagen dentro de un div. Mi caso es que tengo un div con ...
  #1 (permalink)  
Antiguo 13/11/2013, 13:46
 
Fecha de Ingreso: noviembre-2012
Mensajes: 184
Antigüedad: 11 años, 5 meses
Puntos: 0
Centrar verticalmente img dentro de un div con float

Buenas,
he buscado por interne todas las posibilidades para centrar verticalmente una imagen dentro de un div.
Mi caso es que tengo un div con float: right con un ancho y alto especifico.
Dentro de este div va una imagen, que sus medidas son desconocidas, por lo que el ancho se ajusta y el alto nunca se supera. No llego a centrarlas verticalmente.
Adjunto el codigo:
Código HTML:
<div id="not">
           <div id="d">
                      <h3>TITULO</h3>
                      <p>UNA DESCRIPCION</p>
           </div>
           <div id="imagen1">
                       <img id="i1" src="<?echo $ruta;?>"> 
           </div>
           <div id="f">
                          FECHA PUBLICACION
           </div>
</div> 
Aquí el CSS:
Código HTML:
#not{
    width: 100%;
    height: 49%;
    margin-bottom: 1%;
}
#d{
    width: 56%;
    height: 80%;
    float: left;
    margin-right: 1%;
}
#d h3{
    margin-top: 0%;
    margin-bottom: 2%;
    margin-left: 0%;
}
#d p{
    width: 92%;
    height: 75%;
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 8%;
}
#imagen1{
    width: 43%;
    height: 100%;
    float: right;
}
#i1{
    width: 100%;
    height: auto;
}
Espero vuestra ayuda!
Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 13/11/2013, 15:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar verticalmente img dentro de un div con float

Código CSS:
Ver original
  1. img#imagen1 {
  2.   position: relative;
  3.   top: 50%;
  4.   transform: translateY(-50%);
  5. }

Añádase los prefijos propietarios pertinentes.

Otra forma:

Código HTML:
Ver original
  1. <div id="imagen1">
  2.   <span><img id="i1" src="algo.jpg"></span>
  3. </div>

Código CSS:
Ver original
  1. div#d {
  2.   display: table;
  3. }
  4.  
  5. div#d span {
  6.   display: table-cell;
  7.   vertical-align: middle;
  8. }
  #3 (permalink)  
Antiguo 13/11/2013, 16:15
 
Fecha de Ingreso: noviembre-2012
Mensajes: 184
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Centrar verticalmente img dentro de un div con float

Muchas gracias tio, pero no me va... He probado como me dijiste y el css me qeda así:
Código HTML:
#imagen1{
    width: 270.250px;
    height: 150.844px;
    float: right;
}

#imagen1{
  display: table;
}
 
#imagen1 span {
  display: table-cell;
  vertical-align: middle;
}
Quizás lo este ponoendo mal...
  #4 (permalink)  
Antiguo 13/11/2013, 17:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar verticalmente img dentro de un div con float

¿Añadiste el span al HTML?
  #5 (permalink)  
Antiguo 14/11/2013, 02:26
 
Fecha de Ingreso: noviembre-2012
Mensajes: 184
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Centrar verticalmente img dentro de un div con float

Sí.
Me qeda así:
Código HTML:
<div id="imagen1">
             <span><img id="i1" src="<?echo $not["imagen"];?>"></span> 
</div> 
  #6 (permalink)  
Antiguo 14/11/2013, 02:30
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar verticalmente img dentro de un div con float

Vale el problema será lo de flotar #imagen1 hacia la derecha, si haces eso display se computará como un elemento de bloque, ya no como una tabla. Entonces igual te va a venir mejor la primera forma de hacerlo con transform.
  #7 (permalink)  
Antiguo 14/11/2013, 02:31
 
Fecha de Ingreso: noviembre-2012
Mensajes: 184
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Centrar verticalmente img dentro de un div con float

Vale!
Con respecto a la otra forma lo intenté ya y no me reconocia css la función traslateY cuando inspecciono el elemento. me sale un simbolito y tachada la propiedad...
  #8 (permalink)  
Antiguo 14/11/2013, 02:42
 
Fecha de Ingreso: noviembre-2012
Mensajes: 184
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Centrar verticalmente img dentro de un div con float

Ya me fué!! muchas gracias! el problema que al usar Chrome no me reconocía dicha propiedad ya que para este navegador la propiedad es:
-webkit-transform: translateY(-50%);

Muchas gracias por tu ayuda!
  #9 (permalink)  
Antiguo 14/11/2013, 02:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar verticalmente img dentro de un div con float

Cita:
Iniciado por Cota_Isla Ver Mensaje
el problema que al usar Chrome no me reconocía dicha propiedad ya que para este navegador la propiedad es:
-webkit-transform: translateY(-50%);
Claro, por eso te decía lo de:

Cita:
Iniciado por pzin Ver Mensaje
Añádase los prefijos propietarios pertinentes.
Es decir, ponerlo tal que así:

Código CSS:
Ver original
  1. -webkit-transform: translateY(-50%);
  2. -moz-transform: translateY(-50%);
  3. -ms-transform: translateY(-50%);
  4. -o-transform: translateY(-50%);
  5. transform: translateY(-50%);

O simplemente pones:

Código CSS:
Ver original
  1. transform: translateY(-50%);

Y usas prefix free. Si vas a usar más cosillas de CSS moderno no está de más para no tener que repetir las cosas hasta la saciedad.
  #10 (permalink)  
Antiguo 14/11/2013, 02:51
 
Fecha de Ingreso: noviembre-2012
Mensajes: 184
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Centrar verticalmente img dentro de un div con float

Joe tio que bien! no lo conocía! muchas graciass!!

Etiquetas: ancho, float, img, verticalmente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:49.