How to center a form without affecting the Abels?

Asked

Viewed 113 times

1

I have a form like this: formulário

The form is within a class called container which has the following attributes: `

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

If I add one text-align:center in the container, I can center the form. However, when I do this, the Abels that are on top of the inputs are centered on the input as well.

How can I center the form without it happening?

The html of the Form is this:

    <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>
html5 css3
  • 1

    Right, and where is the HTML of this form? Will we have to create them to test? Read this post https://pt.meta.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas/5485#5485

  • @Leocaracciolo added.

  • 1

    see if with width: 50%; be sure

  • He went a little to the right, but did not center.

  • By the classes it seems that you are using Bootstrap check? If you are which version is?

  • @hugocsl I’m not. The form-group and container, I created.

  • Ok young is because the classes have the same names rss. Of qq way I have posted an example as response that can help you.

  • @Leocaracciolo Actually your solution worked. It’s that I had gotten confused with the size of the inputs, because I’m using percentage.

Show 3 more comments

2 answers

1


0

I think defining margin: 0px auto in a container already solves.

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

Browser other questions tagged html5 css3

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