6

estou tenndando centralizar meu formulario de pesquisa no centro da minha div mas nao estou conseguindo existe alguma propiedade em css que faca isso sem precisa de ganbiarra? aqui esta a pagina de desenvolvimento

index.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="#" >

        </script>
    </head>
    <body>
        <div>
            <form action="search.php" method="GET" class="fc">
                    <input type="text" autocomplete="on" name="q" placeholder="Digite a sua pesquisa" />
                    <input type="submit" value="Tecle Enter" />
            </form>
        </div>
    </body>
</html> 

style.css

* {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html body {
        background-color: ghostwhite;
}

body div {
    display: block;
    width: 90%;
    height: 123px;
    margin: 0 auto;
    border: 2px dashed black;
}

div .fc   {
    margin: 0 auto; 
}

vejam eu setei margin: 0 auto; na minha div e na minha class .fc mas nao esta funcinando

resultado n naavegador

form centro

3
  • Horizontalmente e verticalmente?
    – David
    6/06/2016 às 19:06
  • Para o margin: 0 auto; funcionar o seu form tem que ter uma largura fixa também!
    – Igor Mello
    6/06/2016 às 19:13
  • nos dois, agora quando eu setei o width ele ficou tronxo pendendo para a direita
    – user45474
    6/06/2016 às 19:29

2 Respostas 2

2

A única alteração simples que você deve fazer é essa:

  • Em vez de DISPLAY:BLOCK digite - DISPLAY:FLEX. E mais nada!

TENTE ISSO. É MÁGICO!!!!!!!

* {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html body {
        background-color: ghostwhite;
}

body div {
    display: flex;
    width: 90%;
    height: 123px;
    margin: 0 auto;
    border: 2px dashed black;
}

div .fc   {
    margin: 0 auto; 
}
<body>
  <div>
    <form action="search.php" method="GET" class="fc">
      <input type="text" autocomplete="on" name="q" placeholder="Digite a sua pesquisa" />
      <input type="submit" value="Tecle Enter" />
    </form>
  </div>
</body>

1

O form por default tem width de 100% do elemento pai. Tem de definir text-align:center

form {
  text-align:center;
  border: 1px solid;
}
<div>
            <form action="search.php" method="GET" class="fc">
                    <input type="text" autocomplete="on" name="q" placeholder="Digite a sua pesquisa" />
                    <input type="submit" value="Tecle Enter" />
            </form>
        </div>

Pode definir também uma width e centrar o form, nota que centrar o form não é a mesma coisa que centrar os elemtos dentro dele, para isso tem o exemplo acima:

form {
    border:1px solid;
  width: 300px;
  margin: 0 auto;
  }
<div>
            <form action="search.php" method="GET" class="fc">
                    <input type="text" autocomplete="on" name="q" placeholder="Digite a sua pesquisa" />
                    <input type="submit" value="Tecle Enter" />
            </form>
        </div>

3
  • valeu cara agora ficou direitinho +1 vlw
    – user45474
    6/06/2016 às 20:34
  • De nada @NikoBellic
    – Miguel
    6/06/2016 às 20:34
  • alem de generoso ainda e modesto
    – user45474
    7/06/2016 às 3:02

Você deve fazer log-in para responder a esta pergunta.