0

Tenho um página simples com poucos elementos: logomarca, abaixo tem o slogan, abaixo tem um ul com ícones de rede social e uma seta que disparará algum script.

Eu gostaria de manter centralizado todos esses elementos no centro da tela, vertical e horizontalmente. Exceto a seta, que deve ficar centralizada horizontalmente, mas no rodapé da página.

Acontece que existem muitas resoluções e eu gostaria que esses elementos ficassem sempre centralizados de acordo com cada resolução do usuário que acessar. Até aí tudo bem.

Eu preciso que, quando o usuário clicar na seta pra baixo, mover a logo para o topo e à esquerda da página. Assim como descer a seta para que fique invisível na tela do usuário, mover os ícones de rede social para o rodapé, mas à direita, e que os outros elementos recebam fadeOut.

Porém, para que os elementos possam ser movidos, precisam de "position:absolute/fixed". Como eu poderia fazer com que os elementos fiquem posicionados como eu quero e movê-los, com animate, para onde quero?

Segue um pedaço do código HTML:

<div id="logo-container">
                <img id="logo" src="http://<?= $base?>img/logo.png" />
            </div>


            <div id="etc">
                <h3>Slogam</h3>
                <hr class="intro-divider">
                <h4>Compartilhe</h4>

                <ul class="list-inline intro-social-buttons">
                    <li>
                        <a href="https://twitter.com/SBootstrap"><i class="fa fa-twitter fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/google-plus-ico.png" /></span></a>
                    </li>
                    <li>
                        <a href=""><i class="fa fa-github fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/facebook-ico.png" /></span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/twitter-ico.png" /></span></a>
                    </li>
                </ul>
            </div>
            <div id="seta">
                <a href=""><img src="http://<?= $base?>img/seta-baixo-ico.png" /></a>
            </div>
2
  • O importante é o CSS. 5/04/2015 às 21:47
  • Mas eu preciso fazer com o jQuery, pois é dinâmico. 5/04/2015 às 21:49

1 Resposta 1

1

Pelo que eu entendi, o seu problema está em precisar de position:absolute/fixed para fazer a animação e não conseguir centralizar os elementos usando essas propriedades.
Se for isso mesmo, eu sugiro uma solução onde é possível centralizar elementos com position: absolute

#elemento{
 position: absolute;
 left: 50%;
 margin-left: -150px; /*Sempre a metade da largura do elemento*/
 width: 300px;
 height: 300px;
}

<div id="elemento">
</div>
2
  • É, eu até fiz isso. A questão é justamente manter os elementos posicionados sempre no centro (vertical e horizontal) independente da resolução do usuário. 6/04/2015 às 19:13
  • Ontem eu tava meio lesado e devo ter feito algo errado quando testei. Valeu! 6/04/2015 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .