Centering HTML form using CSS

Question

I've looked through many threads on how to do this but and applied the things on there but still struggling to do this, the text does get centered but the actual elements still stay on the left of the screen.

The form:

<div class="row">
        <div class="col-md-6">
            <div class="formdiv">
                <form id="my-form" method="post">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="OrderEmail"></label>
                        <br />
                        <input asp-for="OrderEmail" />
                    </div>
                    <button id="update-profile-button" type="submit" class="btn btn-primary">Send</button>
                </form>
            </div>
        </div>
    </div>

CSS:

.formdiv {
    display: block;
    text-align: center;
}

#my-form {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

score 1 · Answer 1 · answered Apr 26 '20 at 17:25

Try this:

<div class="container">
 <div class="row">
  <div class="col-md-6 mx-auto">
   <div class="formdiv">
    <form id="treatment-form" method="post">
     <div asp-validation-summary="All" class="text-danger"></div>
      div class="form-group">
       <label asp-for="OrderEmail"></label>
       <br />
       <input asp-for="OrderEmail" />
      </div>
      <button id="update-profile-button" type="submit" class="btn btn-primary">Send Email</button>
     </form>
    </div>
   </div>
  </div>
</div>

score 0 · Answer 2 · edited Apr 26 '20 at 17:36

If you want to align the button in the center of the text input, then the answer is here. Otherwise, please let me know.

<div class="row">
    <div class="col-md-6">
        <div class="formdiv">
            <form id="treatment-form" method="post">
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="OrderEmail"></label>
                    <br />
                    <input asp-for="OrderEmail" />
                </div>
                <button id="update-profile-button" type="submit" class="btn btn- 
 primary">Send Email</button>
            </form>
        </div>
    </div>
</div>

and CSS

#treatment-form {
     display: inline-block;
     margin-left: auto;
     margin-right: auto;
     text-align: left;
}
.formdiv {
     display: block;
     text-align: center;

}
#update-profile-button{
     margin-left:40px;
}

Dhanushka sasanka · Answer 3 · 2020-04-26T17:49:18.173

Using position you can do that

.formdiv{
    top:0;
    right:0;
    bottom:0;
    left:0;
    position:absolute;
    margin:auto;
    width: 200px;
    height:100px;
}

#treatment-form {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#update-button{
    display: flex;
    align-items: center;
    justify-content: center;
  
}

<div class="row">
        <div class="col-md-6">
            <div class="formdiv">
                <form id="treatment-form" method="post">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="OrderEmail"></label>
                        <br />
                        <input asp-for="OrderEmail" />
                    </div>
                    <div id="update-button">
                    <button id="update-profile-button" type="submit" class="btn btn-primary">Send Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Rajiv · Answer 4 · 2020-04-26T17:40:18.593

0

If you are talking about something like this :

then here is how it is done using flexbox:

#treatment-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div class="row">
  <div class="col-md-6">
    <div class="formdiv">
      <form id="treatment-form" method="post">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
          <label asp-for="OrderEmail"></label>
          <br />
          <input asp-for="OrderEmail" />
        </div>
        <button id="update-profile-button" type="submit" class="btn btn-primary">Send Email</button>
      </form>
    </div>
  </div>
</div>

adding the flex properties to form element, it can be centered. Also if you wanna center the text in input field, add the text-align property to the input field by giving center as the value. Here is the codepen link- https://codepen.io/thoughtlessmind/pen/QWjvOZZ?editors=1100

edited Apr 26 '20 at 17:40

answered Apr 26 '20 at 17:33

Rajiv

3,346
2
12
27

Yeah that's what i'm looking for, I can't tell what i'm doing wrong but all the suggestions on here just move the form slightly to the right – mievvin Apr 26 '20 at 17:42
Your way of doing this is also right except the text-align property you have added in #treatment-form. Just remove that property or add center text-align, then it'll work the same as mine. As you've added text-align left, so the button got aligned to left. Hope it solved your query. :) – Rajiv Apr 26 '20 at 17:47
I removed it and it still only just moves the form slightly to the right, it's not in the middle, not quite sure what i'm doing wrong. – mievvin Apr 26 '20 at 17:52
check this codepen link: https://codepen.io/thoughtlessmind/pen/QWjvOZZ?editors=1100 . it is centered. In your case, it might be possible that some other CSS styles or other HTML tags could be affecting the positioning of you form element. – Rajiv Apr 26 '20 at 18:04

Centering HTML form using CSS

4 Answers4