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

Question

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

Navigation

#1 by (0 votes)

1

No, the question is not repeated ...

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

And I 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 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>

html css div alinhamento vertical-align

asked by anonymous 27.10.2017 / 18:51

1 answer

Python Site / Forum [closed] Regex Regular expression - Include parentheses in place of quotation marks

score 0 · Accepted Answer

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

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

Source: link

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

Below I've done some models of how vertical-align:middle works and what it's for.

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