1

Tenho a print abaixo:

Print da tela

Estou tentando dar um margin: 0 auto no botão submit dentro do form mas nada que eu faça centraliza esse botão. Mas não posso fazer text-align: center senão vai centralizar todos os elementos do form.

Eis o **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>  

O que fazer?

3 Respostas 3

1

Isso ocorre pq o input é um elemento do tipo inline, ai ele não reconhece os valores de margim. Mas se vc colocar ele com display:block ele vai pegar o valor das margens e fica centralizado.

Veja no exemplo para entender melhor. Repare que bastou colocar display:block e margin:auto que o input centralizou. OBS: Nem encostei no seu HTML só com CSS resolveu.

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>  

4
  • Pois é, até deu certo. Mas me ocorre uma dúvida aqui: Se apenas elementos block recebem dimensões, Porque mesmo sem display: block ele está recebendo dimensões? E, no inspector, o browser cou ele como inline-block. Nesse caso, não seria o caso, de que se ele recebe dimensões também não deveria receber o margim: o auto? Commented 23/05/2018 às 13:22
  • 1
    Pode me ajudar em mais essa: pt.stackoverflow.com/questions/301056/… fazendo favor? Commented 23/05/2018 às 13:23
  • @CarlosRocha a diferença do inline para inline-block é que o inline-block pode ter width e height etc, mas ao mesmo tempo ele continua na "lina" do fluxo do texto com os outros elemento inline e inline-block. Ele não quebra a linha como uma div, um P ou um H1 por exemplo entende. Vou ver se consigo te ajudar com a outra pergunta que vc linkou
    – hugocsl
    Commented 23/05/2018 às 13:37
  • 1
    Essa do inline eu entendi agora. Obrigado! Não esqueço NUNCA mais. Commented 23/05/2018 às 13:39
0

Você pode deixar o botão dentro de uma div separada e centraliza-lo dentro.

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>

No exemplo acima apenas adicionei o botão dentro de uma div com a classe .baseCenter. Nessa classe, centralizo todos os elementos que estiverem dentro dela utilizando display:flex.

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>

Põe o que vc quer centralizar numa div e aplica o text-align: center;

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 .