Align vertical giving error!

Then a mix is made using the property text-align:center and line-hegiht .

<style>  

      .login {
          display: block;
          width: 100%;
          height:50px;
          border:#E9E9E9 3px solid;
          position:relative;
          text-align:center;
      }

      .login img, .login a {
          display:inline-block;
          vertical-align:middle;
          line-height:50px;      
      }

</style>

    <div class="login">
       <img src="_img/_iconesLoja/email.png" />&nbsp;<a href="minhaConta.php">Minha Conta</a>
    </div>

In this case you will need to change via line-height . As in the example below:

.login {
  display: block;
  width: 100%;
  height: 50px;
  border: #E9E9E9 3px solid;
  position: relative;
}

.login img,
.login a {
  display: inline-block;
  vertical-align: middle;
  line-height: 3rem;
}

<div class="login">
  <img height="40" src="http://4.bp.blogspot.com/-1CHUH2gG8xE/VNSwMQHnVOI/AAAAAAAAAiM/4_XE0KblWs4/s1600/Twitter.png"/>&nbsp;<ahref="minhaConta.php">Minha Conta</a>
</div>

There is no automatic way to do this unless you change to flex . Which in turn would look like this:

.login {
  display: flex;
  width: 100%;
  height: 50px;
  border: #E9E9E9 3px solid;
  position: relative;
  align-items: center;
}

.login img,
.login a {
  display: flex;
  vertical-align: middle;
}

<div class="login">
  <img height="40" src="http://4.bp.blogspot.com/-1CHUH2gG8xE/VNSwMQHnVOI/AAAAAAAAAiM/4_XE0KblWs4/s1600/Twitter.png"/>&nbsp;<ahref="minhaConta.php">Minha Conta</a>
</div>

EDIT: Vertical-Align Explanation

• Elements inline or inline-block (only) can be aligned vertically using the vertical-align: middle. But this did not include the alignment of the parent div. This aligns only with the lines in that it belongs. As exemplified in this jsfiddle .
• For elements block , alignment is more complicated and will depending on the situation:
  • If the element has a fixed height , you can use the absolute position and adjust its height , margin-top , and top . Example: jsfiddle
  • If the element you want to center is simple, you also you can adjust your line-height until it is set to height of the parent element. It is a very versatile way to use it. Example: jsfiddle .
  • And there are still many other special cases ...

You can use the display: flex property to facilitate alignment, see:

.login {
    display: flex;
    justify-content: center; // Alinha ao centro horizontalmente
    align-items: center; // Alinha ao centro verticalmente
    flex-direction: column; // Define que um elemento tem que estar sempre um abaixo do outro e não ao lado.

    border: 3px solid #E9E9E9;
}


<div class="login">
    <img src="http://placehold.it/150x150"/>&nbsp;<ahref="minhaConta.php">Minha Conta</a>
</div>

• See working at codepen
• Learn more about flexbox