How can I center my form within my div?

Asked

Viewed 10,158 times

6

I’m trying to centralize my research form in the center of my div but I’m not getting any property in css that does this without needing 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>

css style.

* {
    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 I’ve set margin: 0 auto; in my div and in my class .fc but it’s not working

result n naavegador

form centro

css css3

  • Horizontally and vertically?

  • To the margin: 0 auto; work your form has to have a fixed width as well!

  • in the two, now when I set the width it became trunk hanging to the right

2 answers

2

The only simple change you should make is this:

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

TRY THAT. 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>

1


The default form has a width of 100% of the parent element. You have to 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 elemtos within it, for this has 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>

  • Thanks guy now is right +1 vlw

  • You’re welcome @Nikobellic

  • generous yet modest

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.