2

Queria mover esse formulário de login para o centro da página mas não vai. Tentei padding, text-ident, align, nada faz esses input se moverem, com excessao do botão nada se move, mesmo fazendo até copiei e colei, ele não muda de lugar de jeito nenhum, então vou postar o código todo.

Código:

body{ background-color: black;} body{ color: white;}

FireTecOfficial-Pagina de acesso

Faça login para acessar sua conta

<!--Sistema de Login-->

<form>
    <table> 
        <label for="login">Login:
        <input type="text" id="login" name="login" placeholder="Codigo do cidadão" size="10"><br />
        <label for="Senha">Senha:
        <input type="password" name="senha" placeholder="Senha" size="10"><br />
        <input style="text-indent: 1100px;" type="submit" name="botao-Acessar" value="Acessar" ><br />
        <input type="checkbox" name="manterconectado" value="Manter conectado"/> Manter conectado <br />
        <input style="text-indent: 1100px;" type="checkbox" name="termoseservicos" value="Li e Aceito os termos de uso"/> Li e Aceito os termos de uso<br />
     </table>
</form>
2
  • posta seu codigo html. ps.: align e nao allign
    – Eloa
    Commented 29/10/2018 às 19:39
  • Yuri edite a sua pergunta e inclua o CSS que está usando
    – hugocsl
    Commented 29/10/2018 às 19:54

2 Respostas 2

2

Se quiser centralizar tudo, você pode utilizar o display: flex, juntamente com suas propriedades de alinhamento, em uma <div> para o formulário, com isso você consegue centralizar as informações, sem perder a "indentação" dos elementos e deixando os elementos na mesma linha, como o checkbox.

Você pode entender mais, dando uma olhada nesse guia.

Segue o exemplo de uso, abaixo:

#containerForm{
  display:flex;
  justify-content:center;
  align-items:center;
}
<div id="containerForm">
  <form>
    <table> 
        <label for="login">Login:</label>
        <input type="text" id="login" name="login" placeholder="Codigo do cidadão"><br />
        <label for="Senha">Senha:</label>
        <input type="password" name="senha" placeholder="Senha"><br />
        <input type="submit" name="botao-Acessar" value="Acessar" ><br />
        <input type="checkbox" name="manterconectado" value="Manter conectado"/> Manter conectado <br />
        <input type="checkbox" name="termoseservicos" value="Li e Aceito os termos de uso"/> Li e Aceito os termos de uso<br />
     </table>
  </form>
</div>

4
  • Jovem só uma dica, quando vc colocou column vc "quebrou" alguns ítens do formulário em linhas diferentes, veja que agora cada input:checkbox fica em uma linha separada, e o texto abaixo... originalmente pelo código da pegunta o checkbox ficava do lado do texto...
    – hugocsl
    Commented 29/10/2018 às 20:05
  • Visita este site: w3schools.com/css/css_positioning.asp Obs: Comentei apenas para agregar a resposta do Gabriel. Enfim, o que acontece é que o site é inglês mas ele tem textos bem objetivos , pode-se traduzir pelo google tradutor facilmente e vai enriquecer muito seu estudo de form se quiser usar css nele. Commented 29/10/2018 às 20:10
  • ajustei para que ficasse sem a quebra dos elementos, nem precisou de column rs, vlw @hugocsl Commented 29/10/2018 às 20:21
  • 1
    @GabrielSilva irei dar uma lida sim, vlw Commented 29/10/2018 às 20:21
1

Jovem, primeiro veja que usar uma table da forma que vc usou dentro do form não faz sentido algum, vc pode retirar essa tag...

Depois basta colocar text-align:center na tag form que o conteúdo todo será centralizado, pois as tags dentro do form são tag com escopo inline

form {
  text-align: center;
}
  
<form>
    <label for="login">Login:
    <input type="text" id="login" name="login" placeholder="Codigo do cidadão" size="10"><br />
    <label for="Senha">Senha:
    <input type="password" name="senha" placeholder="Senha" size="10"><br />
    <input style="" type="submit" name="botao-Acessar" value="Acessar" ><br />
    <input type="checkbox" name="manterconectado" value="Manter conectado"/> Manter conectado <br />
    <input style="" type="checkbox" name="termoseservicos" value="Li e Aceito os termos de uso"/> Li e Aceito os termos de uso<br />
</form>

4
  • resolvi colocar o comando <pre> mesmo, nada faz esse formulario se mover. Commented 29/10/2018 às 20:49
  • @YuriKenpachi em algum lugar deve ter algum css prescrevendo esse alinhamento, se tiver tempo da uma verificado depois ou me dá um toque aqui que te dou uma força
    – hugocsl
    Commented 29/10/2018 às 20:55
  • eu não acho esse erro, tá tudo muito organizado. Commented 29/10/2018 às 21:00
  • @YuriKenpachi considerando só o código que vc postou na pergunta eh difícil te dizer o que vc fez ai que não esta aceitando o estilo... Talvez algum .css externo ou de algum template, ou framework... Mas o fato eh que para elemento do tipo inline como são os elementos do form o correto seria o text-align.center mesmo
    – hugocsl
    Commented 29/10/2018 às 21:12

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 .