How to center a form without affecting the labels?

Navigation
1

I have a form like this:

Theformisinsideaclasscalledcontainerwhichhasthefollowingattributes:'

.container{width:80%;margin:auto;padding:30px;}

IfIaddatext-align:centertothecontainer,Icancentralizetheform.However,whenIdothis,thelabelsontopoftheinputsarecenteredrelativetotheinputaswell.

HowcanIcentralizetheformwithoutthishappening?

ThehtmloftheFormisthis:

<form><divclass="form-group">
      <label for="name">Nome:</label>
      <input type="text" name="name" id="name" required>
    </div>

    <div class="form-group">
      <label for="age">Idade:</label>
      <input type="number" name="age" id="age" required>
    </div>

    <div class="form-group">
      <label for="work-area">Área de atuação:</label>
      <select name="work-area" id="work-area" required>
        <option value="developer">Desenvolvedor</option>
        <option value="infra">Infraestrutura</option>
        <option value="designer">Designer</option>
      </select>
    </div>

    <div class="form-group">
      <label for="vacation">Férias?</label>
      <input type="checkbox" name="vacation" id="vacation">
    </div>

    <div class="form-group">
      <label for="entry-date">Data de entrada:</label>
      <input type="date" required id="entry-date">
    </div>

    <button type="submit">Salvar</button>
  </form>
    
asked by anonymous 26.06.2018 / 19:10

2 answers

1

Use the flexbox feature of css3: 

.container {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center
}

Example: link

    
26.06.2018 / 19:23
0

I think setting margin: 0px auto in a container already resolves. 

.container{
  width:400px;
  margin: 0px auto
}
<div class="container">
<form>
    <div class="form-group">
      <label for="name">Nome:</label>
      <input type="text" name="name" id="name" required>
    </div>

    <div class="form-group">
      <label for="age">Idade:</label>
      <input type="number" name="age" id="age" required>
    </div>

    <div class="form-group">
      <label for="work-area">Área de atuação:</label>
      <select name="work-area" id="work-area" required>
        <option value="developer">Desenvolvedor</option>
        <option value="infra">Infraestrutura</option>
        <option value="designer">Designer</option>
      </select>
    </div>

    <div class="form-group">
      <label for="vacation">Férias?</label>
      <input type="checkbox" name="vacation" id="vacation">
    </div>

    <div class="form-group">
      <label for="entry-date">Data de entrada:</label>
      <input type="date" required id="entry-date">
    </div>

    <button type="submit">Salvar</button>
  </form>
</div>
    
26.06.2018 / 19:20
ASP.NET MVC Project Publishing Laravel Error count () laravel / datatables 5.2 PHP -v 7.2