Por que é vertical-align: text-top; não funciona no CSS

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

  •  06-09-2019
  •  | 
  •  

Pergunta

Eu quero alinhar algum texto para o topo de uma div. Parece que vertical-align: text-top; deve fazer o truque, mas ele não funciona. As outras coisas que eu fiz, como colocar os divs em colunas e exibir uma borda tracejada (para que eu possa ver onde o topo da div é) todos funcionam bem. 

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}
Foi útil?

Solução

O atributo vertical-align é apenas para elementos em linha. Ele não terá nenhum efeito sobre elementos nível de bloco, como um div. Também text-top só se move o texto para a parte superior do tamanho da fonte atual. Se você gostaria de alinhar verticalmente um elemento inline ao topo é só usar isso. 

vertical-align: top;

A marca parágrafo não está desatualizado. Além disso, o atributo vertical-align aplicado a um elemento de extensão podem não ser apresentadas como se pretende em algumas Mozilla.

Outras dicas

vertical-align só é suposto para trabalhar em elementos que são processados ??como inline. <span> é processado como inline por padrão, mas nem todos os elementos são. O elemento de bloco parágrafo, <p>, é apresentado como um bloco por padrão. Tabela tipos render (por exemplo table-cell) permitirá a utilização vertical-align bem.

Alguns navegadores podem permitem que você use a propriedade CSS vertical-align em itens como o bloco de parágrafo, mas eles não deveriam. Texto indicado como um parágrafo deve ser preenchido com conteúdo de linguagem escrita ou o mark-up é incorreto e deve estar usando um de uma série de outras opções em vez disso.

Espero que isso ajude!

algo como 

  position:relative;
  top:-5px;

apenas no elemento inline em si funciona para mim. Tem que jogar com a parte superior para obtê-lo centrado na vertical ...

Você pode aplicar position: relative; ao div e depois position: absolute; top: 0; a um parágrafo ou espaço dentro dela contendo o texto.

Você pode usar seletores contextuais e mover o vertical-align lá. Isso poderia funcionar com a tag p, então. Tomar este fragmento abaixo como um exemplo. Quaisquer tags p dentro de sua classe vão respeitar o controle vertical-align: 

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

Você também pode manter o vertical-align em ambas as seções para que outros, elementos inline usaria isso.

A todos acima não trabalho para mim, eu apenas verificado esta e seu trabalho:

vertical-align: super; 

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

Eu sei por preenchimento ou margem vai funcionar, mas que é a última escolha eu prefiro. 

position:absolute;
top:0px; 
margin:5px;

resolveu o meu problema.

Você pode usar margin-top:. -50%, para mover o texto todo o caminho até o topo da div 

margin-top: -50%;

O problema que tive não pode ser feito a partir da informação que eu forneci:

  • Eu tive o texto incluído em tags <p> da velha escola.

Eu mudei o <p> para <span> e trabalha muito bem.

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