Centralize Ubmit in form

Question

I have the print below:

I’m trying to give a margin: 0 auto in the botão submit within the form but nothing I do centralization that button. But I can’t do text-align: center otherwise it will center all the elements of the form.

Here is the **form**:

<div class="administrador">

  <h1 class="titulos">Cadastro de Administrador</h1>

  <form class="administradorCadastra">

      <label class="labelPequeno">Tipo</label><select id="tipo" name="tipo" required  class="typeTextMedio">
        <option value="">Escolha o tipo</option>
        <option value="s">Super Administrador </option>
        <option value="c">Comum Administrador </option>
      </select><br /> <br />
      <label class="labelPequeno">Nome</label><input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required /> <br /> <br />
      <label class="labelPequeno">Login</label><input type="text" class="typeTextMedio" maxlength="<?php echo $constantes->getLenLogin(); ?>" id="login" name="login" required /> <br /> <br />
      <label class="labelPequeno">Senha</label><input type="password" class="typeTextMedio" maxlength="<?php echo $constantes->getLenSenha(); ?>" id="senha" name="senha" required /> <br /> <br />

      <img class="spinner" src="../_img/_bannerImgs/spinner.gif" />          
      <input type="submit" class="btnAcesso" value="Cadastrar Administrador" /><br /> <br />

      <label class="resposta"></label>

  </form>

</div>  

What to do?

Answer 1

This occurs because the input is an element of the inline, he does not recognize the values of margim. But if you put him with display:block it will take the value of margens and is centralized.

See in the example to better understand. Note that just put display:block and margin:auto that the input centered. OBS: I didn’t even touch your HTML only with CSS solved.

form [type="submit"] {
    display: block;
    margin: auto;
}

<div class="administrador">

        <h1 class="titulos">Cadastro de Administrador</h1>
        
        <form class="administradorCadastra">
        
            <label class="labelPequeno">Tipo</label><select id="tipo" name="tipo" required  class="typeTextMedio">
                <option value="">Escolha o tipo</option>
                <option value="s">Super Administrador </option>
                <option value="c">Comum Administrador </option>
            </select><br /> <br />
            <label class="labelPequeno">Nome</label><input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required /> <br /> <br />
            <label class="labelPequeno">Login</label><input type="text" class="typeTextMedio" maxlength="<?php echo $constantes->getLenLogin(); ?>" id="login" name="login" required /> <br /> <br />
            <label class="labelPequeno">Senha</label><input type="password" class="typeTextMedio" maxlength="<?php echo $constantes->getLenSenha(); ?>" id="senha" name="senha" required /> <br /> <br />
        
            <img class="spinner" src="../_img/_bannerImgs/spinner.gif" />          
            <input type="submit" class="btnAcesso" value="Cadastrar Administrador" /><br /> <br />
        
            <label class="resposta"></label>
        
        </form>
        
</div>  

Answer 2

You can leave the button inside a div separate and centralize it within.

Ex:

.baseCenter{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="administrador">

  <h1 class="titulos">Cadastro de Administrador</h1>

  <form class="administradorCadastra">

      <label class="labelPequeno">Tipo</label><select id="tipo" name="tipo" required  class="typeTextMedio">
        <option value="">Escolha o tipo</option>
        <option value="s">Super Administrador </option>
        <option value="c">Comum Administrador </option>
      </select><br /> <br />
      <label class="labelPequeno">Nome</label><input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required /> <br /> <br />
      <label class="labelPequeno">Login</label><input type="text" class="typeTextMedio" maxlength="<?php echo $constantes->getLenLogin(); ?>" id="login" name="login" required /> <br /> <br />
      <label class="labelPequeno">Senha</label><input type="password" class="typeTextMedio" maxlength="<?php echo $constantes->getLenSenha(); ?>" id="senha" name="senha" required /> <br /> <br />

               
      
      <div class="baseCenter">
      <img class="spinner" src="../_img/_bannerImgs/spinner.gif" /> 
      <input type="submit" class="btnAcesso" value="Cadastrar Administrador" />
      </div>
      
      <br /> <br />

      <label class="resposta"></label>

  </form>

</div>

In the above example I just added the button inside a div with class .baseCenter. In this class, I centralize all the elements inside it using display:flex.

Answer 3

CSS:

.center {
  text-align: center;
}

HTML:

<div class="center">
   <img class="spinner" src="../_img/_bannerImgs/spinner.gif" />          
   <input type="submit" class="btnAcesso" value="Cadastrar Administrador" /><br /> <br /> 
</div>

Put what you want to center on one div and applies the text-align: center;