How can I centralize my form within my div?

Navigation
6

I'm trying to centralize my search form in the center of my div but I'm not getting any property in css that does this without the need to ganbiarra? here is the development page

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; 
}

See how many margin: 0 auto; in my div and in my class .fc but not working

result na navigator

    
asked by anonymous 06.06.2016 / 20:59

2 answers

1

The form by default has a width of 100% of the parent element. You must set 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>

You can also set a width and center the form, note that centering the form is not the same thing as centering the elements inside it, so you have the above example: 

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>
    
06.06.2016 / 22:11
2

The only simple change you should make is this:

  • Instead of DISPLAY: BLOCK enter - DISPLAY: FLEX. And nothing else!

TRY IT. IT'S MAGICAL !!!!!!! 

* {
    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>
    
09.06.2016 / 03:06
How does dynamic typing work in Python 3.x? Coordinates of selected area in image