Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jair Humberto

centralizar verticalmente com javascript

Por , em Javascript

Recommended Posts

Jair Humberto    2

Jair Humberto
Postado

Olá pessoal,

 

que tal centralizar verticalmente com javascript?

 

function vertical_padding_auto(objeto)
{
    var div = document.createElement("div")
    for(i = objeto.childNodes.length-1; i >= 0; i--)
        div.insertBefore(objeto.childNodes[i], div.firstChild)
    objeto.appendChild(div)
    div.style.padding = Math.floor((objeto.offsetHeight - div.offsetHeight) / 2) + "px 0"
}

objeto é qualquer elemento bloco que contenha algum texto puro para ser centralizado verticalmente.

 

exemplo com um trecho de código:

 

    <script type="text/javascript" src="arquivodafuncao.js"></script>
    <script type="text/javascript">
        window.onload = function()
        {
            var links = document.getElementById("nav").getElementsByTagName("a")
            for(var i=0; i < links.length; i++)
                vertical_padding_auto(links[i])
        }
    </script>
</head>
<body>
    <ul id="nav">
        <li><a href="#">link<br />1</a></li>
        <li><a href="#">link<br />2</a></li>
        <li><a href="#">link<br />3</a></li>
        <li><a href="#">link<br />4</a></li>
        <li><a href="#">link<br />5</a></li>
    </ul>
</body>

É uma solução que entra em contraste com CSS que sempre vem com o probleminha "não funciona nesse ou naquele navegador"

 

O que acham?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

Não entendi se é uma duvida ou um tutorial ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jair Humberto    2

Jair Humberto
Postado

Olá Mario!

 

Não é dúvida, é só uma sugestão para alinhar verticalmente textos em elementos bloco com javascript.

 

:)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito