在引导程序中居中表单不起作用[重复]

Posted 2023-03-04

【中文标题】在引导程序中居中表单不起作用[重复]

【英文标题】：Centering a form in bootstrap not working [duplicate]

【发布时间】：2021-09-02 18:34:52

【问题描述】：

我试图将我的表单放在一个 div 中，但我使用的方法不起作用。我尝试使用引导文档中所述的 justify-content-center 属性，但它没有居中。当我尝试将其居中但在我的 CSS 中应用 display: flex 和 justify-content: center 时，它被包裹在表单中，失去了方向并弄乱了。我无法弄清楚如何将其居中，我哪里出错了。任何帮助表示赞赏。提前致谢。

.onlineRefilFormCon 
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 90%;


.onlineRefillTitleCon 
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 10%;


.onlineRefillForm 
  position: absolute;
  top: 20%;
  width: 40%;
  height: 80%;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;


.form-group 
  padding-top: 5%;


.col-form-label 
  font-weight: 600;


.form-check-input 
  border: 2px solid;


.form-control 
  width: 60%;
  border: 2px solid;


.textarea 
  margin-top: -10%;
  margin-left: 17%;
  border: 2px solid;


.radio1 
  margin-top: 3%;
  margin-left: 20%;


.form-check-inline 
  padding: 0%;


.OnlineSubmitBtnCon 
  position: absolute;
  bottom: 7%;
  width: 100%;
  height: 10%;


.OnlineSubmitBtnCon button 
  margin-left: 35%;

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="onlineRefilFormCon">
  <div class="onlineRefillTitleCon">
    <h2 class="onlineRefillTitle">Online Refill</h2>
  </div>
  <form class="onlineRefillForm" id="onlineRefillForm">
    <div class="form-group row justify-content-center">
      <label for="text-input" class="col-2 col-form-label">First Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="" id="text-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="text-input" class="col-2 col-form-label">Last Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="" id="text-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="date-input" class="col-2 col-form-label">Date</label>
      <div class="col-10">
        <input class="form-control" type="date" value="yyyy-mm-dd" id="date-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="email-input" class="col-2 col-form-label">Email</label>
      <div class="col-10">
        <input class="form-control" type="email" value="" id="email-input">
      </div>
    </div>
    <div class="form-check-inline radio1">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1"
                        value="option1" checked>
                    Pickup
                </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
                        value="option2">
                    Delivery
                </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
                        value="option2">
                    Mail
                </label>
    </div>
    <div class="form-group justify-content-center">
      <label for="textarea" class="col-2 col-form-label">Refill Details</label>
      <textarea class="form-control textarea" rows="7" placeholder="Example: Lisinopril"></textarea>
    </div>
    <div class="OnlineSubmitBtnCon">
      <button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">Submit</button>
    </div>
  </form>
</div>

【参考方案1】：

应用样式

margin-left:auto;margin-right:auto;

还将任何内容居中以供将来参考

【参考方案2】：

如果你想使表单元素居中对齐，你应该使用text-align:center 样式。所以你应该将text-center bootstrap 类添加到你想要居中对齐的元素中。

它对你有用吗？

【讨论】：

不，它没有用

我已经更新了我的答案，请尝试告诉我。

没有也没用

我试过了，但它有效。你想告诉我更多关于你的问题的细节吗？

请给我看一张你的长相截图。

【参考方案3】：

有没有可能是因为引导样式的链接已损坏？当我尝试示例代码时，url 失败了，所以我上传了一个新的 cdn 链接，表单显示为居中。

.onlineRefilFormCon 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-weight: 600;


.onlineRefillForm 
  display: flex;
  flex-direction: column;
  width: 40%;
  padding: 48px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;


.form-group 
  padding-top: 5%;


.form-check-input 
  border: 2px solid;


.form-control 
  width: 60%;
  border: 2px solid;


.textarea 
  margin-top: -10%;
  margin-left: 17%;
  border: 2px solid;


.radio1 
  margin-top: 3%;
  margin-left: 20%;


.form-check-inline 
  padding: 0%;

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<div class="onlineRefilFormCon">
  <form class="onlineRefillForm" id="onlineRefillForm">
    <label for="text-input">First Name </label>
    <input type="text" value="" id="text-input" />
    <br>
    <label for="text-input">Last Name</label>
    <input type="text" value="" id="text-input" />
    <br>
    <label for="date-input">Date</label>
    <input type="date" value="yyyy-mm-dd" id="date-input" />
    <br>
    <label for="email-input">Email</label>
    <input type="email" value="" id="email-input" />
    <br>
    <label>Pickup
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked /></label>
    <br>
    <label>Delivery
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /></label>
    <br>
    <label>Mail
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /></label>
    <br>
    <label for="textarea" class="col-2 col-form-label">Refill Details</label>
    <textarea rows="7" placeholder="Example: Lisinopril"></textarea>
    <br>
    <button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">
      Submit
    </button>
  </form>
</div>

【讨论】：

仍然没有居中

那里发生了很多事情，我认为我刚刚所做的修订并不能完全回答您的问题，但可能值得检查一下简化方法的优缺点。可能有助于简化 html 结构以发现冲突的 css 声明。