1

Não, a pergunta nao é repetida...

Em outras perguntas, vi gambiarras para alinhar o texto verticalmente utilizando margin, padding, etc.

E vi como uma possível solução, alterar para display:flex, position:relative etc.

Mas e se eu necessitar que o display continue block, ou inline-block, existe alguma forma de fazer o vertical-align funcionar?

.menu{
    height:100%;
    width:20%;
}
.opcao{
    height: 10%;
    width:100%;
}
.opcao:hover{
    background-color:blueviolet;
    color: aliceblue;
    cursor:pointer;
}

<div class="menu" >
     <div class="opcao">
        Teste
     </div> 
 </div>

1 Resposta 1

0

Amauri o vertical-align por definição só funciona no inline e no table-cell. Ele é usado para alinhar uma img ao texto por exemplo (a imagem é um elemento inline ok). Ou então para alinhar algo dentro da célula de uma tabela.

Note that vertical-align only applies to inline and table-cell elements: you can't use it to vertically align block level elements.

Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Resumido o vertical-align não vai funcionar nunca no block ou inline-block, para essas opções existem outras técnicas.

Abaixo fiz alguns modelos de como o vertical-align:middle funciona e para que serve.

.opcao{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 200px;
    width:200px;
    background-color: mediumpurple;
}
.opcao:hover{
    background-color:blueviolet;
    color: aliceblue;
    cursor:pointer;
}
.opcao1{
    background-color: pink;
}
img {
  vertical-align: middle;
}
<div class="opcao">
    <span>middle</span>
</div> 

<div class="opcao opcao1">
  <span>Teste <img src='http://lorempixel.com/50/50' alt=''/> middle</span>
</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 .