Centrar verticalmente img dentro de un div con float

[Cota_Isla]

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.

[pzin]

Código CSS:

img#imagen1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
 

Añádase los prefijos propietarios pertinentes.

Otra forma:

Código HTML:

<div id="imagen1">
  <span><img id="i1" src="algo.jpg"></span>
</div>
 

Código CSS:

div#d {
  display: table;
}
 
div#d span {
  display: table-cell;
  vertical-align: middle;
}
 

[Cota_Isla]

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...

[pzin]

¿Añadiste el span al HTML?

[Cota_Isla]

Sí.
Me qeda así:

Código HTML:

<div id="imagen1">
             <span><img id="i1" src="<?echo $not["imagen"];?>"></span> 
</div> 

[pzin]

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.

[Cota_Isla]

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...

[Cota_Isla]

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!

[pzin]

Iniciado por Cota_Isla

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:

Iniciado por pzin

Añádase los prefijos propietarios pertinentes.

Es decir, ponerlo tal que así:

Código CSS:

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
 

O simplemente pones:

Código CSS:

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.

[Cota_Isla]

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