0

Como fixar um botão ou texto? Por exemplo, em um background já com o fundo desenhado, no caso seria apenas fixar o texto em uma parte especifica do background e ao redimensionar o navegador ele acompanhasse com o background?

3 Respostas 3

3

A tag que procura de css é position fixed.

Exemplo:

<html>
<head>
    <title>texto fixo</title>
    <style>
        .fixo{
            position        :   fixed;
            width           :   250px;
            height          :   100px;
            left            :   50%;
            margin-left     :   -125px;
            top             :   50%;
            margin-top      :   -50px;
            background-color:   black;
            color           :   white;
        }
    </style>
</head>
<body>
<div class="fixo">
    Este texto tem:<br>
    width de 250px<br>
    height de 100px<br>
    ficará sempre no meio
</div>
<div style="height:1000000px"></div><!-- div para criar scroll -->
</body>

1

Eu não sei se isto ajuda muito, mas se você fizer um site usando bootstrap esse site fica formatado para equipamentos como smartphones e tablets e ajusta automaticamente todos os elementos da pagina quando a página é redimêncionada. No fundo o bootstrap utiliza um css padrão que ajuda a você a fazer um site mais rapidamente.

Se realmente quiser ler mais sobre bootstrap acesse os seguintes links http://getbootstrap.com/ http://www.w3schools.com/bootstrap/

Claro que você pode fazer o mesmo sem usar directamente bootstrap. Tudo isso é feito em css principalmente.

1
  • Sim, já ouvi falar Amadeu, eu uso ele, também, essa dúvida me surgiu só agora por incrível que pareça ! obrigado pelo seu tempo! Commented 6/10/2015 às 15:47
0

Você pode dá um tamanho estático ao conteúdo que deseja centralizar e colocar margens (esquerda e direita) automáticas, assim o browser irá ficar responsável por centralizar este conteúdo, veja um exemplo:

<html>
<head>
   <style type="text/css">
        .content-center
        {
            width:30em;
            height:40em;
            background-color:blue;
            margin-left:auto;
            margin-right:auto;
            padding:5em;            
         }
    </style>
</head>
<body>
   <div class="content-center">
       <h1>Ficar No centro</h1>
       <p>Este texto irá ficar no centro da página</p>
   </div>
</body>
</html>

Salve este código e execute em seu navegador e veja se satisfaz sua dúvida, espero ter ajudado!

2
  • Só ressaltando que isso será feito no CSS da página me questão! Commented 6/10/2015 às 14:03
  • Era assim mesmo, muito obrigado! Commented 6/10/2015 às 15:46

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