Como alinhar verticalmente 2 tamanhos diferentes de texto?

91

Eu sei que para alinhar o texto verticalmente no meio de um bloco, você define a altura da linha para a mesma altura do bloco.

No entanto, se eu tiver uma frase com uma palavra no meio, claro 2em. Se a frase inteira tiver uma altura de linha igual à do bloco que a contém, o texto maior será alinhado verticalmente, mas o texto menor estará na mesma linha de base do texto maior.

Como posso definir para que os dois tamanhos de texto fiquem alinhados verticalmente, de modo que o texto maior fique em uma linha de base inferior ao texto menor?

JD Isaacks
fonte

Respostas:

148

Tentar vertical-align:middle;contêineres embutidos?

EDITAR: funciona, mas todo o seu texto deve estar em um contêiner embutido, como este:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

MatTheCat
fonte
5
E eu sempre pensei que vertical-align: middlefosse só para table-cell's!
Robin van Baalen
1
Isso parece falhar se eu quiser que o segundo período seja flutuado corretamente. Em seguida, está alinhado no topo: jsfiddle Alguma ideia de como fazê-lo funcionar com float?
philk
2
É necessário definir os estilos de altura e altura de linha do div pai?
lexeek
6

A funcionalidade que você está vendo está correta porque o padrão para "alinhamento vertical" é a linha de base. Parece que você quer vertical-align:top. Existem outras opções. Veja aqui em W3Schools .

Editar W3Schools não limpou sua atuação e ainda, parece, ser uma fonte de informação de má qualidade (na melhor das hipóteses). Agora eu uso o sitepoint . Role até o final da página inicial do sitepoint para acessar suas seções de referência.

DwB
fonte
11
Desde então, aprendi que W3Schools não é um bom site de referência. Consulte w3fools.com para obter mais informações.
DwB
2
+1 Tenha um voto positivo por chegar à conclusão de que W3S é um lixo.
aefxx
4

os dois conjuntos de texto devem ter a mesma altura de linha fixa e o conjunto de alinhamento vertical

 span{
     vertical-align: bottom;
     line-height: 50px;
}
Matoeil
fonte
1

Você tecnicamente não pode, no entanto, se você tiver tamanhos de texto fixos, poderá usar o posicionamento (relativo) para mover o texto maior para baixo e definir a altura da linha para o texto menor (presumo que este texto maior esteja marcado como tal então você pode usar isso como um seletor de CSS)

Alex
fonte
1

Você pode usar tamanhos de porcentagem para reaplicar o do pai line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}
Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Creaforge
fonte
1

Maneira fácil - use flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>
Tomas Macek
fonte
0

Uma opção é usar uma tabela onde os textos de tamanhos diferentes estão em suas próprias células e usar o align: middle em cada célula.

Não é bonito e não funciona para todas as ocasiões, mas é simples e funciona com qualquer tamanho de texto.

David Mårtensson
fonte
9
Prefiro aceitar a derrota antes de usar uma mesa para o layout novamente.
JD Isaacks,
0

Isso funciona

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}
<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

Ronnie Royston
fonte