0

como faço para que a imagem e o link abaixo fiquem alinhados ao centro verticalmente?

A imagem e o link em linha, e essa linha, alinhada verticalmente ao centro (middle) em relação à div login

Tentei de 2 formas:

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>

Nenhum dos 2 deu certo?

3 Respostas 3

2

Então se faz um mix usando a propriedade text-align:center e 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>

5
  • 2
    O alinhamento que preciso é vertical Commented 2/03/2017 às 16:32
  • Você diz a imagem em cima do link como na resposta acima ou dessa forma mas no centro vertical da div ?@CarlosRocha
    – MagicHat
    Commented 2/03/2017 às 16:33
  • imagem e link lado a lado, e centralizados verticalmente ao middle para que o link não fique em cima em relação à imagem. E, esse bloco que contem a imagem e o link alinhados verticalmente ao middle em relação à div login Commented 2/03/2017 às 16:43
  • Ve-lá man @CarlosRocha editei...
    – MagicHat
    Commented 2/03/2017 às 16:46
  • era isso mesmo, só pode tirar o text-align: center pois isso não vou usar! Commented 2/03/2017 às 16:56
2

Neste caso você irá precisar alterar via line-height. Como no exemplo abaixo:

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

Não há uma forma automática de realizar este processo a não ser que você mude para flex. Que por sua vez seria assim:

.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: Explicação Vertical-Align

  • Elementos inline ou inline-block (somente) podem ser alinhados verticalmente usando o vertical-align: middle. Porém isso não incluí o alinhamento da div parente. Isso alinha somente com as linhas em que ele pertence. Como exemplificado nesse jsfiddle.
  • Para elementos block, o alinhamento é mais complicado e vai depender bastante da situação:
    • Se o elemento tiver uma altura fixa, você pode usar a posição
      absolutee ajustar a sua height, margin-top, e a top. Exemplo: jsfiddle
    • Se o elemento que você deseja centralizar for simples, você também pode ajustar a sua line-height até que ele fique ajustado a height do elemento pai. É uma forma bem versátil de se utilizar. Exemplo: jsfiddle.
    • E ainda há muitos outros casos especiais...
4
  • Por favor, me explique quando é que usamos vertical-align? Porque sempre que preciso usar não funciona! Commented 2/03/2017 às 16:41
  • @CarlosRocha checa por favor a minha edição de Explicação. Commented 2/03/2017 às 16:58
  • Entendi, tem inline ou inline-block, usa vertical-align naturalmente. Display Block, precisa tratar o position Commented 2/03/2017 às 17:11
  • @CarlosRocha É por aí. Mas a forma mais eficaz de se fazer o que você quer, na minha opinião, seria tentar compreender o flex. Commented 2/03/2017 às 17:30
0

Você pode usar a propriedade display: flex para facilitar o alinhamento, veja:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .