Question

似乎无论我尝试什么，白框中的所有内容只是不想居中。我到处都看过了，尝试了一些建议，使用了CSS，但是它不会离开它的位置。

有人可以以此指向我正确的方向吗？我只想知道我在做什么错以及如何解决。如果您需要更多信息，请告诉我：）。

以下是我正在谈论的内容的屏幕截图：

这是我的html代码：

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

这是我的CSS代码：

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

Answer 1

您以错误的方式使用了bootstrap，我解决了。不要使用网格系统来居中

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

Answer 2

也许您需要下面的代码来居中

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

Answer 3

使用Flex显示示例：-

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

还请记住，如果在head元素中应用此样式，则此样式可能不会覆盖使用的其他css类，因此请对每个属性都使用！important或使用内联css ...

如何将所有内容居中放置在我创建的框中？

3 个答案: