Align vertical giving error!

Question

how do I make the image and link below align to the center vertically?

The image and the online link, and this line, aligned vertically to the center (Middle) in relation to the div login

I tried two ways:

1)

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

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

</style>

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

2)

<style>  
  .login {
      display: block;
      width: 100%;
      height:50px;
      border:#E9E9E9 3px solid;
      position:relative;
  }
  .login .lg {   
      display: block; 
      vertical-align:middle;
      height:30px;
  }
  .login .lg img, .login .lg a {
      display:inline-block;
      vertical-align:middle;
  }
</style>

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

Neither of them worked out?

Answer 1

So you make a mix 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>

Answer 2

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;<a href="minhaConta.php">Minha Conta</a>
</div>

There is no automatic way to carry out this process unless you switch to flex. That in turn would be so:

.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;<a href="minhaConta.php">Minha Conta</a>
</div>

EDIT: Vertical-Align Explanation

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

Answer 3

You can use the property display: flex 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;<a href="minhaConta.php">Minha Conta</a>
</div>

• See working on codepen
• Know more about flexbox