Alinhar um personagem ao topo das letras adjacentes

StackOverflow https://stackoverflow.com/questions/2300499

  •  21-09-2019
  •  | 
  •  

Pergunta

Desejo alinhar um personagem em HTML ao topo dos personagens ao lado dele. O atributo CSS Vertical Align parece ser o que eu quero, mas estou tendo alguns problemas.

Usando vertical-align: text-top Não parece fazer o que eu quero, mas achei que deveria ler as especificações.

Atualmente, estou usando vertical-align: 10% que é uma solução razoável, exceto que eu tenho que calcular o número adequado em cada plataforma para que ela pareça correta. A detecção do navegador para definir o valor para um que eu acho que está certo parece ser a solução errada.

Foi útil?

Solução

Feio, mas você pode usar células de tabela.

Primeiro defina alguns estilos:

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

Então o html:

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>

Outras dicas

Tente o <sup> marcação. É para o Exacly o que você está tentando fazer. Depois de implementá -lo, você pode controlá -lo ainda mais com o CSS.

Exemplo: M<sup>c</sup>Phe yeilds mcPhe

http://www.w3schools.com/tags/tag_sup.asp

Se o "C" for muito pequeno, apenas faça <style> sup { font-size: 9pt } </style> ou algo assim.

O comentário de Anthony para a pergunta me deu uma ideia de embrulhar o "C" com um semanticamente correto <sup> tag (ou acho que você poderia continuar usando um <span>) e depois use o CSS text-transform: uppercase; nele.

Algumas dessas idéias estão no caminho certo, mas nenhuma delas funciona. Acabei combinando a sugestão de Josh Stodola para usar text-transform: uppercase; Com a sugestão de Keltex de usar uma letra maiúscula em uma fonte menor para ter capacas pseudo-pequenas, mesmo que o uso de tabelas não seja o não-neness.

Ele ainda depende de futuro com tamanhos de fonte e alturas de linha, mas posso obter um efeito mais consistente dessa maneira, pelo menos.

A sugestão de usar <sup> não é realmente útil, pois eu teria que substituir todos os seus estilos de qualquer maneira, por isso não difere de um <span>. Semanticamente, pode haver uma diferença, mas pequena o suficiente para que isso não importa.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top