verticale allineare un multiplo di testo arco linea sul display: inline-block elemento

Question

Ho un problema con questo codice, perché lorem ipsum non è nel bel mezzo di div genitore:

<div style="width: 500px; height: 500px; background-color: #f0f0f0"> 
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red"> 
     <a style="vertical-align: middle">lorem ipsum</a> 
    </div> 
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red"> 
     <a style="vertical-align: middle">lorem ipsum</a> 
    </div> 
</div> 

lo so, posso usare table-cell e molti altri modi, ma perché un codice semplice come il mio non funziona? C'è una soluzione? Ho bisogno di supporto IE8 e supporto multilinea, position: absolute non è una soluzione ...

Answer 1

Provare a dare line-height: 100px invece di vertical-align. È possibile utilizzare in questo modo:

<div style="width: 500px; height: 500px; background-color: #f0f0f0"> 
 
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red"> 
 
    <a style="line-height: 100px;">lorem ipsum</a> 
 
    </div> 
 
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red"> 
 
    <a style="line-height: 100px;">lorem ipsum</a> 
 
    </div> 
 
</div>

Anteprima

O il modo successivo è quello di utilizzare il translate, che funziona solo in browser moderni:

<div style="width: 500px; height: 500px; background-color: #f0f0f0"> 
 
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red; position: relative;"> 
 
    <a style="transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute;">lorem ipsum</a> 
 
    </div> 
 
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red; position: relative;"> 
 
    <a style="transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute;">lorem ipsum</a> 
 
    </div> 
 
</div>

in anteprima:

Answer 2

questo è il violino qui e lavorare con vertical-align: middle

https://jsfiddle.net/kodedsoft/txgLzycd/

codice è

<div style="width: 500px; height: 500px; background-color: #f0f0f0"> 
    <div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red"> 
     <a style="display:table-cell;vertical-align: middle">lorem ipsum</a> 
    </div> 
    <div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red"> 
     <a style="display:table-cell;vertical-align: middle">lorem ipsum</a> 
    </div> 
</div> 

** aggiornamento: https://jsfiddle.net/kodedsoft/txgLzycd/3/ **

Answer 3

Vertical-align non vuol dire quello che penso pensate che significhi.

In questo caso, l'allineamento verticale si riferisce all'allineamento dell'elemento in relazione ai fratelli ... non all'interno di un genitore (a meno che non si tratti di una tabella o di una cella di tabella) (o di un altro antenato).

Tuttavia, non si ha realmente bisogno perché ....

Flexbox possono farlo:

.parent { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: #f0f0f0; 
 
    text-align: center; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.child { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red 
 
} 
 
a { 
 
    text-decoration: none; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <a href="#">lorem ipsum</a> 
 
    </div> 
 
    <div class="child"> 
 
    <a href="#">lorem ipsum</a> 
 
    </div> 
 
</div>