vertical align of 2 images plus a div inside another div

Question

I'm trying to align vertically two arrows, one right arrow ( id="freccia-destra" ), one left arrow ( id="freccia-sinistra" ) and a div containing 2 photos ( id="div_galleria" ).

These 3 elements are inside id="div_3";

How can I vertically align them?

Here's is the CSS + Html code:

 #div_3{ display: inline; } .r { display: inherit; } 

  <div id="div_3" width="100%" height="830" align="center"> <img class="r" id='freccia_sinistra' src="freccia_sinistra.png" height="100px" onclick="sinistra()"> <div class="r" id='div_galleria' width="95%" height="800" align="center"></div> <img class="r" id='freccia_destra' src="freccia_destra.png" height="100px" onclick="destra()"> </div> 

Answer 1

 #div_3{ display: inline; } .r { display: inherit; vertical-align: middle; } 

 <div id="div_3" width="100%" height="830" align="center"> <img class="r" id='freccia_sinistra' src="http://placekitten.com/g/50/100" height="100px" onclick="sinistra()"> <div class="r" id='div_galleria' width="95%" height="800" align="center"> <img class="r" id='' src="http://placekitten.com/g/50/100" height="200px" onclick="sinistra()"> <img class="r" id='' src="http://placekitten.com/g/50/100" height="300px" onclick="sinistra()"> </div> <img class="r" id='freccia_destra' src="http://placekitten.com/g/50/100" height="100px" onclick="destra()"> </div> 

use vertical align center if your display is inline or inline-block