How would I center the everything inside the box I've created?

Question

It seems no matter what I try, all of the content in the white box just just doesn't want to get centered. I've looked all over SO, tried some suggestions, played around with the CSS, but it just won't move out of its place.

Is it possible for anybody to point me in the right direction with this? I just want to know what I'm doing wrong and how can I fix it. If you need more information, please let me know :).

Here's a screenshot of what I'm talking about:

Here's my html code:

<div class="container">
    <div class="wrapped_content container">
        <div class="white_content container">
                <div class="row row-eq-height">
                    <div id="support-form-wrapper" class="col-xs-12 col-sm-12 col-md-8 form-wrapper">
                        <form class="container" id="submissionForm" name="submissionForm"
                              enctype="multipart/form-data" method="post">
                            {{ csrf_field() }}
                            <input type="hidden" name="submissionFormSubmitted" value="yes">
                            <div class="col-md-7 name-container">
                                <div class="name-support-forms">
                                    <div class="form-group" id="name-form">
                                        <p class="form_header center-block">Enter the confirmation code sent to your email.</p>
                                        <input type="text" class="form-control center-block" id="inputNumberConfirm"
                                               placeholder="######" onfocus="onConfirmFocus()">
                                        <span class="subName error">*Required</span>

                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 submit-btn-wrapper">
                                <div class="form-group">
                                    <button type="submit"
                                            class="d-block mx-auto btn btn-primary"
                                            data-style="zoom-in" data-size="l">Get Temporary Password
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
           </div>
           </div>

Here's my css code:

.wrapped_content {
  background-color: #EFF0F1;
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.change_pass.center-block {
  color: #717D79;
  font-size: 32px;
  font-weight: 200;
  margin-top: 40px;
  padding-top: 5%;
}

.wrapped_content h1, .white_content.container h1 {
  text-align: center;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

h1, .h1 {
  font-size: 36px;
}


.white_content {
  background-color: #fff;
  margin-top: 30px;
  max-width: 55%;
  max-height: 70%;
  margin-bottom: 153px;
  border: 1px solid #C2C4C4;
  height: 100%;
  width: 638.797px;
}

#inputNumberConfirm {
  max-width: 100px;
  float: none;
}

@media (max-width: 684px) {
  .white_content {
    max-width: 100%;
    max-height: 100%;
  }
}

.form_header.center-block {
  color: #717D79;
  font-size: 20px;
  font-weight: 200;
  margin-top: 40px;
}

p {
  margin: 0 0 10px;
}

you are doing too much man, you are using bootstrap in wrong way, let me correct — Nisharg Shah, Jan 25 '19 at 16:05

Rahul · Answer 1 · 2019-01-25T16:45:47.653

0

may be you need below code to center

#support-form-wrapper{
    margin: 0 auto;
    text-align: center;
    width: 500px; // change this as you want or change column for desktop
}

edited Jan 25 '19 at 16:45

answered Jan 25 '19 at 16:01

Rahul

4,294
1
10
12

I tried that already, it only moves slightly to the right :( – greyskies Jan 25 '19 at 16:02
see my updated answer – Rahul Jan 25 '19 at 16:04
Yeah, that works but it only gets centered in mobile view and not desktop view – greyskies Jan 25 '19 at 16:07
see updated answer, bye – Rahul Jan 25 '19 at 16:46

score 0 · Answer 2 · answered Jan 25 '19 at 16:17

you are using bootstrap in wrong manner, i solved it. don't use grid system for centering form

.wrapped_content {
  background-color: #EFF0F1;
}

.change_pass.center-block {
  color: #717D79;
  font-size: 32px;
  font-weight: 200;
}

.row-eq-height {
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="wrapped_content">
    <div class="white_content">
      <div class="row-eq-height">
        <div id="support-form-wrapper" class="col-12 form-wrapper">
          <form class="container" id="submissionForm" name="submissionForm" enctype="multipart/form-data" method="post">
            {{ csrf_field() }}
            <input type="hidden" name="submissionFormSubmitted" value="yes">
            <div class="name-container">
              <div class="name-support-forms">
                <div class="form-group" id="name-form">
                  <p class="form_header center-block">Enter the confirmation code sent to your email.</p>
                  <input type="text" class="form-control center-block" id="inputNumberConfirm"
                  placeholder="######" onfocus="onConfirmFocus()">
                  <span class="subName error">*Required</span>

                </div>
              </div>
            </div>
            <div class="submit-btn-wrapper">
              <div class="form-group">
                <button type="submit" class="d-block mx-auto btn btn-primary" data-style="zoom-in" data-size="l">Get Temporary Password
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Jan 25 '19 at 16:53

Use Flex Display Example:-

    <style>
    .container{
    display:flex;
    justify-content:center;
    align-items:center;
    }
    </style>

    <div class='container'>

<div class='child'></div>
<div class='child'></div>
<div class='child'></div>

</div>

Also Remember That if you apply this style in head element than this might not override other css class used so put !important with each property or use inline css...

How would I center the everything inside the box I've created?

3 Answers3