Come allineare verticalmente qualcosa all'interno di un tag span?

Question

Come ottengo la "x" per essere allineata verticalmente nel mezzo dello span?

.foo { 
    height: 50px; 
    border: solid black 1px; 
    display: inline-block; 
    vertical-align: middle; 
} 

<span class="foo"> 
    x 
</span> 

Answer 1

L'attributo css di allineamento verticale non fa ciò che ci si aspetta sfortunatamente. This article spiega 2 modi per allineare verticalmente un elemento usando css.

Answer 2

Utilizzare line-height:50px; invece di altezza. Quello dovrebbe fare il trucco;)

Answer 3

Impostare padding-top per essere un valore appropriato per spingere la x verso il basso, quindi sottrarre il valore che hai per padding-top dall'altezza.

Answer 4

questo funziona per me (Keltex detto la stessa)

.foo { 
height: 50px; 
... 
} 
.foo span{ 
vertical-align: middle; 
} 

<span class="foo"> <span>middle!</span></span> 

Answer 5

essere consapevoli che l'approccio line-height non riesce se si dispone di una lunga frase nella span che rompe la linea perché non c'è abbastanza spazio. In questo caso, avresti due linee con un gap con l'altezza dei pixel N specificati nella proprietà.

Mi sono bloccato quando volevo mostrare un'immagine con il testo centrato verticalmente sul lato destro che funziona in un'applicazione web reattiva. Come base, utilizzo l'approccio suggerito da Eric Nickus e Felipe Tadeo.

Se si vuole raggiungere:

e questo:

.container { 
 
    background: url("https://i.imgur.com/tAlPtC4.jpg") no-repeat; 
 
    display: inline-block; 
 
    background-size: 40px 40px; /* image's size */ 
 
    height: 40px; /* image's height */ 
 
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */ 
 
} 
 

 
.container span { 
 
    height: 40px; /* image's height */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<span class="container"> 
 
    <span>This is a centered sentence next to an image</span> 
 
</span>

Answer 6

Questo è il modo più semplice per farlo se hai bisogno di più linee. Avvolgi il testo span in un altro span e specifica la sua altezza con line-height. Il trucco per più linee è il reset dello interno di.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span> 

.textvalignmiddle { 
    line-height: /*set height*/; 
} 

.textvalignmiddle > span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1em; /*set line height back to normal*/ 
} 

DEMO

Naturalmente l'esterno span potrebbe essere un div o whathaveyou.

Answer 7

ho bisogno di questo per i collegamenti, così ho avvolto l'arco con un A-tag e un div, quindi centrato il tag span sé

HTML

<div> 
    <a class="tester" href="#"> 
     <span>Home</span> 
    </a> 
</div> 

CSS

.tester{ 
    display: inline-block; 
    width: 9em; 
    height: 3em; 
    text-align: center; 
} 
.tester>span{ 
    position: relative; 
    top: 25%; 
} 

Answer 8

CSS centro verticale immagine e testo

Ho creato una demo per il centro di immagine verticale e il testo ho anche il test su Firefox, Chrome, Safari, Internet Explorer 9 e 8.

È molto breve e semplice css e html, si prega di controllare sotto il codice e si può trovare l'output su screenshort.

HTML

<div class="frame"> 
    <img src="capabilities_icon1.png" alt="" /> 
</div> 

CSS

.frame { 
     height: 160px;  
     width: 160px; 
     border: 1px solid red; 
     white-space: nowrap; 
     text-align: center; margin: 1em 0; 
    } 

    .frame::before { 
     display: inline-block; 
     height: 100%; 
     vertical-align: middle; 
     content:""; 
    } 

    img { 
     background: #3A6F9A; 
     vertical-align: middle; 
    } 

uscita enter image description here