Centralize submit no form

Navigation
1

I have the print below:

I'mtryingtogiveamargin:0autoinbotãosubmitwithinformbutnothingIdocentralizethatbutton.ButIcannotdotext-align:centerotherwiseitwillcenteralltheelementsoftheform.

Hereis**form**:

<divclass="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?

    
asked by anonymous 23.05.2018 / 14:40

3 answers

1

This is because input is an element of type inline , so it does not recognize margim values. But if you put it with display:block it will get the value of margens and it gets centralized.

See the example to understand better. Note that it is sufficient to put display:block and margin:auto that input centered. NOTE: 

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>
    
23.05.2018 / 15:00
0

You can leave the button inside a separate div and center it in.

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 center all elements within it using display:flex .

    
23.05.2018 / 14:52
0

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 a div and apply text-align: center;

    
23.05.2018 / 15:05
How to call class by class, taking only the mouse is on it, without catching the others simultaneously? Error in NetworkInfo [duplicate]