html - bold - Como alinho verticalmente algo dentro de uma tag span?



css (6)

Como faço para que o "x" seja alinhado verticalmente no meio do intervalo?

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

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

https://ffff65535.com


Defina padding-top para ser um valor apropriado para empurrar o x para baixo e, em seguida, subtraia o valor que você tem para o padding-top da altura.


Essa é a maneira mais simples de fazer isso se você precisar de várias linhas. Embrulhe o texto em outro span e especifique sua altura com a altura da line-height . O truque para várias linhas é redefinir a line-height span interna.

<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

Claro que a span externa poderia ser um div ou algo assim


Eu precisava disso para links, então eu envolvi o span com uma tag e uma div, então centrei a própria tag span

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%;
}

O atributo css de alinhamento vertical não faz o que você espera, infelizmente. Este artigo explica duas maneiras de alinhar verticalmente um elemento usando css.


Use line-height:50px; em vez de altura. Isso deve fazer o truque;)


isso funciona para mim (Keltex disse o mesmo)

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

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




css