How to move html input

Question

How to move html input

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I wanted to move this login form to the center of the page but it will not. I tried padding , text-ident , align , nothing makes these input move, except for the button nothing moves, even doing until copied and pasted, it does not change place at all, so I'll post the code all.

Code:

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

FireTecOfficial-Access page

Please log in to access your account

<!--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>

html css

asked by anonymous 29.10.2018 / 20:36

2 answers

2

If you want to center everything, you can use display: flex , along with its alignment properties, in a <div> for the form, so you can centralize the information without losing the "indentation" of the elements and leaving the elements on the same line as the checkbox.

You can understand more by taking a look at this guide .

Here is the usage example below:

#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>

29.10.2018 / 20:55

Doubt to use Replace along with Inner Join Autocomplete with data coming from PHP

score 1 · Accepted Answer

Young, first see that using a table of the way you used within form does not make sense, you can remove that tag ...

Then just put text-align:center on the tag form that the whole content will be centralized, since the tags inside the form are tag with inline scope

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>