Demystifying the Veritcal-align... on which display does it work?

Question

No, the question is not repeated...

In other questions, I saw gambiarras to align the text vertically using margin, padding, etc.

And saw as a possible solution, change to display:flex, position:relative etc.

But if I need the display to continue block, or inline-block, is there any way to make the vertical-align work?

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

Answer 1

Amauri the vertical-align by definition only works in the inline and in the table-cell. It is used to align a img to text for example (the image is an inline element ok). Or to align something within the cell of a table.

Note that vertical-align only applies to inline and table-Cell Elements: you can’t use it to vertically align block level Elements.

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

Summarized the vertical-align will never work on block or inline-block, for these options there are other techniques.

Below I made some models of how the vertical-align:middle works and serves what purpose.

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