When to use vertical-align?

Use vertical-align to vertically center an element in your "parent". Unlike text-align this does not adjust the text horizontally, but vertically the entire content of the element.

It can have the following values:

test{
    vertical-align: baseline; /* Alinha o elemento com a base do elemento pai. Essa é a opção padrão */
    vertical-align: *px; /* Alinha o elemento a * pixels da sua posição inicial. Use valores negativos para elevar o elemento */
    vertical-align: sub; /* Alinha o elemento como subescrito em relação à posição padrão. */
    vertical-align: super;  /* Alinha o elemento como superescrito em relação à posição padrão. */
    vertical-align: top; /* O elemento é alinhado pela margem superior do elemento mais alto da linha. */   
    vertical-align: text-top; /* O elemento é alinhado pelo topo da fonte do elemento "pai". */
    vertical-align: middle; /* O elemento é colocado verticalmente no centro do elemento pai. */
    vertical-align: bottom; /* O elemento é alinhado pela margem inferior do elemento mais abaixo da linha. */  
}   

var state = 0;
var states = ["baseline","-20px","sub","super","top","text-top","middle","bottom","text-bottom"]; 
$("document").ready(function(){
    $("#btn").click(function(){
        state += 1;
        if(state > 8){ state = 0; }
        alert(states[state]);
        $("#move").css("vertical-align", states[state]); 
        $("#move").text("vertical-align: " + states[state] + ";");
    });
});

div{
  font-size: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="pai">
  <center>
    <img src="http://i.imgur.com/Vzckf2Z.png"/>Texto<imgid="move" src="http://i.imgur.com/1EFwogv.png"/></center></div><buttonid="btn">Mover!</button>